Flex 伸缩盒布局

Flex 伸缩盒布局

flex布局的属性

容器属性

• flex-flow
• flex-direction
• flex-wrap
• justify-content
• align-item
• align-content

元素属性

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

flex 弹性盒模型

采用flex布局的元素，称为flex容器，它的所有子元素自动成为容器成员，称为flex项目。

对某个元素声明display:flex;那么这个元素就成为了弹性容器，具有flex弹性布局的特性。

1. 每个弹性容器都有两根轴：主轴和交叉轴，两轴之间成90度关系。注意：水平的不一定就是主轴。
2. 每根轴都有起点和终点，这对于元素的对齐非常重要。
3. 弹性容器中的所有子元素称为<弹性元素>，弹性元素永远沿主轴排列。
4. 弹性元素也可以通过display:flex设置为另一个弹性容器，形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。

弹性容器的两根轴非常重要，所有属性都是作用于轴的。

• flex-direction

  取值：row(默认) | row-reserve | colume | colume-reserve

  用于控制项目的排列方向与顺序

• flex-wrap

  取值：nowrap(默认) | wrap | wrap-reverse

  用于控制项目是否换行、换行顺序

• flex-flow

  flex-direction 和 flex-wrap 的简写形式，写法例如

  flex-flow: row nowrap(默认)；

• justify-content

  取值：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly

  用于控制项目在主轴上的对齐方式，分别为左对齐，右对齐，居中，两端对齐，间隔相等，项目之间间隔相等。

• align-item

  取值：flex-strat | flex-end | center | baseline | stretch(默认)

  用于控制项目在交叉轴排列方式，默认stretch即如果项目没有设置宽度则占满整个容器

  baseline比较特殊，它让项目以第一行文字的基线为参照进行排列

• align-content

  取值：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认)

  用于控制多行项目的对齐方式，如果项目只有一行则不起作用。需要设置flex-wrap: wrap;默认stretch，即在项目没有设置高度，或高度为auto的情况下，让项目整个填满容器，与align-items类似。

项目属性

容器属性是加在父容器上的，那么项目属性就是加在项目上的，就好比容器属性设置给ul，

而项目属性设置给li一般。

• order

  取值: 默认是0，用于决定项目的排列顺序，数值越小，排列越靠前

  .项目{

  ​ order:1

  }

• flex-grow

  取值：默认是0，用于决定项目在剩余空间的情况下是否放大，默认不放大；注意，即使设置了固定宽度，也会放大。

  如果某个项目设置了flex-grow:1；而其它项目属性为0，则该项目会占满剩余空间。

• flex-shrink

  取值：默认是1，用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小；注意，即便设置了固定宽度，也会缩小。

  但是某个项目设置了flex-shrink 设置为0，则即便空间不足，自身也不缩小。

• flex-basis

  取值：默认为auto，用于设置项目的宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会比width属性高，因此会覆盖width属性。

• flex

  取值：默认为 0 1 auto ，flex属性是flex-grow，flex-shrink，flex-basis的简写，用于将项目放大，缩小与是否定宽。

  该属性有两个快捷键值，分别是auto(1 1 auto) 等分方法缩小，与none(0 0 auto) 不放大不缩小。

  还有最常用的flex：1 === flex:1 1 0px;

• flex-self

  取值：auto(默认) | flex-start | flex-end | center | baseline | stretch ,表示继承父容器的align-item属性。如果没有父元素，则默认stretch。

  用于让个别项目拥有与其它项目不同的对齐方式，各值的表现与父容器的align-item属性完全一致。