css盒子模型_两小时学会CSS-弹性盒子模型

弹性盒子模型

布局的传统解决方案，基于盒状模型，依赖display 属性+ position 属性+ float属性。

它对于那些特殊布局非常不方便 垂直居中等。

Flex 简便 、完整 、响应式 实现各种页面布局。

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

Flex 是 flex-grow、flex-shrink、flex-basis的缩写。

特点：

1. 元素容器没有足够的空间，无需计算自动设置同意行、同列。
2. 容易在容器内左、中、右对齐。
3. 无需修改结构可以可以改变显示顺序。
4. 容器设置百分比视窗改变大小，子元素自动分配宽度或高度比例。

容器属性：

display ：flex / inline-flex

flex ：box2 不随着子元素变化 100% 撑满屏幕

.

inline-flex ：box2 随着 m-1 ... m-5 的宽高自适应

flex - direction 指向主轴方向

 .step1{
        display: flex;
   /* 
        flex-direction:row;  //不设置 默认
        flex-direction:row-reverse;
        flex-direction: column;
        flex-direction: column-reverse;
     */
 }

row :子元素排成一行

row-reverse ：子元素倒序排成一行

column：子元素排成一列

column-reverse ：子元素倒序排成一列

flexbox 对齐

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

center 、space -between、space-around使用广泛

.

flex-start: 子元素在容器中左对齐 默认

flex-end: 子元素在容器中右对齐

center: 子元素聚集在中间排列

space-between: 两个元素有间隔排列，撑满容器

space-around: 每个子元素间隔间距左右16px，包括容器

flex-wrap 换行

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

在一行或一列排不下，是否允许换行

nowrap:(默认显示) 单行显示

wrap: 多行显示，子元素会溢出容器

.

wrap-reverse:多行 反顺序排列

align-items :交叉轴对齐方式

align-items: flex-start |flex-end| center | basline | stretch

<

flex-start 交叉轴起点对齐，默认左上对齐

flex-end 交叉轴终点对齐 ，左下角对齐

center 交叉轴中点对齐，容器垂直居中对齐

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

stretch 默认 如果项目未设置高度或设置为auth ，将占满整个容器

align-self 属性

align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;

属性值

| 值 | 描述 | |

| :--------- | :----------------------------------------------------------- | :--- |

| auto | 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。 | |

| stretch | 元素被拉伸以适应容器。 | |

| center | 元素位于容器的中心。 | |

| flex-start | 元素位于容器的开头。 | |

| flex-end | 元素位于容器的结尾。 | |

| baseline | 元素位于容器的基线上。 | |

| initial | 设置该属性为它的默认值。 | |

| inherit | 从父元素继承该属性。 | |

align-self: center;

<