CSS中的Flex布局

web.jpeg

Flex 弹性布局

---

概念

• Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

.box{
  display: flex;
}

//行内元素布局
.box{
  display: inline-flex;
}

// Webkit内核浏览器
ox{
  display: -webkit-flex; /* Safari */
  display: flex;
}

• 采用 Flex 布局的元素，称为Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex 项目（flex item），简称"项目"

flex.jpg

• 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
  项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。 可以想成 X 轴和Y轴

所以felx的布局要从2个方面着手，"容器" 和 "项目"`

容器的属性有6个

flex-direction决定item在主轴的排列方向.
flex-wrap 决定item在主轴的方向上是否换行.
flex-flow 是flex-direction和flex-wrap 的综合属性
justify-content定义 item的在主轴对齐方式
align-items定义item在交叉轴的对象方式
align-content 定义了 多行item 在多根轴线的对齐方式 是一个整体的属性值

flex的属性 这是在容器盒子上

• flex-direction属性 决定主轴的方向 (水平方向)

• flex-direction: row | row-reverse | column| column-reverse;

row.png column.png

• flex-wrap属性 是否换行

• flex-wrap: nowrap | wrap | wrap-reverse;

wrap.png

• justify-content属性 是在主轴的上的对齐方式

• justify-content: flex-start | flex-end | center | space-between | space-around;

justify-content属性 .png

align-items 属性 实在交叉轴上的对齐方式

• { align-items: flex-start 交叉轴起点 | flex-end 交叉轴终点 | center 居中| baseline 基线| stretch 如果项目未设置高度或设为auto，将占满整个容器的高度; }

align-content属性 定义多行排列的 对齐方式 把其看成一个整体

• align-content: flex-start | flex-end | center | space-between | space-around | stretch;

火狐截图_2018-05-25T05-22-11.850Z.png

项目属性6个

order: 定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow:定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-shrink: 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-basis: 定义了在分配多余空间之前，项目占据的主轴空间（main size）
flex:属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

火狐截图_2018-05-25T06-29-53.292Z.png