css3伸缩布局（附实例、图解）

目录

1. justify-content 调整主轴对齐（水平）
2. align-items 调整侧轴对齐（垂直）单行比较多
3. flex-wrap控制是否换行
4. flex-flow是flex-direction、flex-wrap的简写形式
5. align-content堆栈（由flex-wrap产生独立行）对齐
6. order控制子盒子的排列顺序

正文

伸缩布局用法：

1，给父盒子添加伸缩布局模式

section {
            /* 父级盒子添加flex */
            display: flex;   /*父亲伸缩布局模式*/
        }

2，给子盒子分配份数

section div {
            flex: 1;    /*子盒子份数，这里是每个人各占一份*/
        }

效果：它是自适应屏幕的

属性：

1.flex子项目在主轴的缩放比例，不制动flex属性则不参与伸缩分配

• min-width 最小值 min-width：200px 最小宽度不能小于200px
• max-width 最大值 同上

2.flex-direction（调整主轴方向，默认是水平方向）

取值：

• row： 主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。
• row-reverse： 对齐方式与row相反。
• column： 主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。
• column-reverse： 对齐方式与column相反。

flex-direction: column;   /*垂直排列*/

注意：就算子盒子有固定多少px剩下的依然按份数分

1. justify-content 调整主轴对齐（水平）

设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。

当弹性盒里一行上的所有子元素都不能伸缩或已经达到其最大值时，这一属性可协助对多余的空间进行分配。当元素溢出某行时，这一属性同样会在对齐上进行控制。

对应的脚本特性为justifyContent。

• 让子元素从父元素的开头开始排序父元素的

justify-content: flex-start;

• 让子元素从父元素的结尾开始排序，但是顺序不变

justify-content: end;

• 让子元素在中间排序，但是顺序不变

justify-content: center;

• 左右的盒子贴近父盒子，中间的平均分布空白间隙

justify-content: space-between;

• 相当于给每个盒子添加左右margin外边距

justify-content: space-around;

2. align-items 调整侧轴对齐（垂直）单行比较多

• 垂直对齐开始位置 上对齐

align-items: flex-start;

• 垂直对齐开始位置 底对齐

align-items: flex-end;

• 垂直居中

align-items: center;

• 让子元素的高度拉伸适用于父容器（子元素不加高度的前提下）

align-items: stretch;

3. flex-wrap控制是否换行

当我们子盒子内容宽度多于父盒子时的处理

• Nowrap：默认值，规定灵活的项目不拆行不拆列
• Wrap：规定灵活的项目在必要时拆行或拆列
• Wrap-reverse：规定灵活的项目在必要时拆行或拆列，但是以相反的顺序

4. flex-flow是flex-direction、flex-wrap的简写形式

Flex-flow：flex-direction flex-wrap；
Flex-flow：排列方向 换不换行；

例：

flex-flow: row wrap;

5. align-content堆栈（由flex-wrap产生独立行）对齐

Align-content是针对flex容器里面多轴（多行）的情况，align-items是针对一行的情况下排列

前提：

必须对父元素设置自由盒子属性 display：flex；并且设置排列方式为横向排列flex-direction：row；这样才能起作用

值：

• Stretch：默认值，项目被拉伸以适应容器
• Center：项目位于容器的中心
• Flex-start：项目位于容器的开头
• Flex-end：项目位于容器的结尾
• Space-between：项目位于各行之间留有空白的容器内
• Space-around：项目位于各行之前、之间、之后都留有空白的容器内

6. order控制子盒子的排列顺序

用整数值来定义排列顺序，数值小的在前面，可以是负值，默认0

例：

Order：1；