flex弹性布局

以下是弹性布局的一些知识点,很简单,易懂!

语法:属性:display

 

取值:

  • flex:当前元素充当弹性布局的容器,并且本身以块级元素显示。
  • inline-flex:当前元素充当弹性布局的容器,并且本身以行内元素显示。

概念:

  • 容器:容纳弹性布局中子元素的父元素。
  • 项目:容器中的子元素

注意:元素一旦变为弹性布局的元素后,float,clear,vertical-align,text-align都失效,定位属性是有效的!

接下来就是弹性布局的核心:弹性布局的属性。弹性布局的属性分为容器的属性和项目的属性。

容器的属性:

  • flex-direction:定义容器的主轴方向
    • row 默认,主轴水平,从左到右
    • row-reverse主轴水平,从右到左
    • column主轴垂直,从上到下
    • column-reverse主轴垂直,从下到上
  • flex-wrap:如果项目在容器中一行显示不下的方式
    • norwap:默认不换行,项目自压缩
    • wrap:换行
    • wrap-reverse:项目在交叉轴上的换行
  • flex-flow:以上两个属性的简写,取值有两个
  • justify-content:项目在主轴方向上的对其方式
    • flex-start:在轴的起点对齐
    • flex-end:末尾段对齐
    • center:居中对齐
    • space-between:项目与项目之间的距离相等
    • space-around:项目两侧的剩余空间相等
  • align-items:项目交叉轴的对齐方式
    • flex-start:在轴的起点对齐
    • flex-end:末尾段对齐
    • center:居中对齐
    • baseline:基线对齐
    • stretch:如何项目未设置高度,将占满整个容器
  • align-content:如果有多跟轴线(需要换行),轴线的对齐方式
    • flex-start:在轴的起点对齐
    • flex-end:末尾段对齐
    • center:居中对齐
    • space-between:项目与项目之间的距离相等
    • space-around:项目两侧的剩余空间相等
    • stretch:占满整个轴线

项目的属性:

  • order:顺序,取值为整数,默认所有项目取值为0,取值越小越往前。
  • flex-grow:如果容器有剩余空间,定义项目的放大比例,将剩余空间分配给具有此属性的元素,按比例分配。
  • flex-shrink:如果容器有空间不足,定义项目的缩小比例。默认为1,取值为0,不压缩。
  • flex-basis:定义在主轴上的大小,可以覆盖width/height,默认为auto。
  • flex:以上3个属性的综合
  • align-self:设置当前这个项目的对齐方式,可以覆盖align-items
    • flex-start:在轴的起点对齐
    • flex-end:末尾段对齐
    • center:居中对齐
    • baseline:基线对齐
    • stretch:如何项目未设置高度,将占满整个容器

    完结!!!

     

    相关文章

    一:display:flex布局display:flex是一种布局方式。它即可以...
    1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何...
    移动端开发知识点pc端软件和移动端apppc端软件是什么,有哪些...
    最近挺忙的,准备考试,还有其他的事,没时间研究东西,快周...
    display:flex;把容器设置为弹性盒模型(设置为弹性盒模型之后...
    我在网页上运行了一个Flex应用程序,我想使用Command←组合键...