CSS中的flex布局

flex布局

转自阮一峰老师：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

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

任何一个容器都可以指定为 Flex 布局。

基本概念

使用flex布局的元素称为“容器”（flex container），子元素称为”项目“（flex item）

语法

.box {
    display: flex;
}

特殊的，Webkit 内核的浏览器，必须加上-webkit前缀。

.box {
    display: -webkit-flex;
    display: flex;
}

用一张图来展示一个使用flex布局的元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BD06GS8t-1583728198671)(C:\Users\杜广楠\Desktop\bg2015071004.png)]

容器中有两根轴，水平的主轴（main axis）和垂直的交叉轴（cross axis）

主轴开始的位置为 main start ，结束的位置为 main end

交叉轴开始的位置为cross start ，结束的位置为 cross end

项目中水平的称为main size，垂直的称为cross size

容器的属性

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

1. flex-direction

   决定了主轴的方向，项目按此方向排列

   有4个值

   • row（默认值）：主轴为水平方向，起点在左端

   • row-reverse：主轴为水平方向，起点在右端

   • column：主轴为垂直方向，起点在顶部

   • column：主轴为垂直方向，起点在底部

   • initial： 该属性为默认值

   • inherit： 继承父元素

2. flex-wrap

   • nowrap（默认值）：不换行

   • wrap：换行

   • wrap-reverse：换行，需要换行的项目出现在上方

3. flex-flow

   flex-direction和flex-wrap的缩写

   例：

   .box {
       flex-flow: row wrap;
   }
   

4. justify-content

   项目在主轴上的对齐方式

   • flex-start：左对齐

   • flex-end： 右对齐

   • center：居中

   • space-between：两端对齐，项目间隔相等

   • space-around：项目两侧间隔相等，项目到边框距离为项目间的一半

5. align-items

   项目在交叉轴上的对齐方式

   • flex-start：交叉轴的起点对齐

   • flex-end：交叉轴的终点对齐

   • center：交叉轴的中点对齐

   • baseline：项目的第一行文字的基线对齐

   • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器

6. align-content

   定义多根轴线的对齐方式，如果只有一根轴线，则不起作用。就是该属性适用于有多行项目的felx容器，。

   • flex-start：与交叉轴的起点对齐
   • flex-end：与交叉轴终点对齐
   • content：与交叉轴中点对齐
   • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
   • space-around：每根轴线两侧的间隔都相等，所以轴线之间的间隔比轴线与边框的间隔大一倍
   • stretch（默认值）：轴线占满整个交叉轴

项目的属性

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

1. order
   项目的排列顺序，数值越小，排列越靠前，默认值为0

2. flex-grow

   项目的放大比例，默认为0

3. flex-shrink

   项目的缩小比例，默认值为1

4. flex-basis

   分配多余空间前，项目占据的主轴空间，默认值auto

5. flex

   是flex-grow，flex-shrink，flex-basis的缩写，默认值为0 1 auto

   有两个快捷值，auto（0 1 auto）和none（0 0 auto）

6. align-slef

   允许项目和其他项目对齐方式不一样，默认值auto