伸缩布局 - 小记 (^▽^)

<h1 class="md-end-block md-heading md-focus"><span class="md-expand">伸缩布局

注意，例如img这种多媒体标签，不要用伸缩盒子来布局，设置宽100%即可；

display: flex; (父元素)

必须将父元素设置为伸缩盒子（弹性盒子）

在伸缩盒子中，默认子元素在一行显示，这是伸缩盒子的特点，与脱标无关！

为什么会一行显示？

在伸缩盒子中，有两条轴，一条主轴，一条侧轴。

在伸缩盒子中，子元素都是按照主轴方向显示的。

flex-direction: row; (父元素)

设置主轴方向

此时已然可以设置 padding 和 margin ；

row 行(横向)；

column 列(纵向)；

row-revers (横向反转，从右向左，类似右浮动)；

column-reverse(竖直反转)；

justify-content: flex-start; (父元素)

设置元素在主轴的对齐方式

flex-star;

从主轴的开始位置向右对齐显示

flex-end;

在轴的末端对齐

center;

主轴的居中位置处

space-between;

两端对齐，中间自适应

space-around;

环绕效果，子盒子左右两侧都有空白；

space-evenly; (ios专有)

把所有空白平均分配；

没有代码提示。

align-items: stretch; (父元素)

设置元素在侧轴的对齐方式；

只有当子元素全部在一行显示的时候才能用此属性；

子元素有换行的时候用align-content: stretch; (父元素)属性设置元素在侧轴的对齐方式。

其实，当元素多行显示的时候，依旧可以用此属性：

元素每一行都有自己的侧轴，当开启align-items的时候，元素在自己行的侧轴生效。

stretch; (默认)

stretch 拉伸的意思当子元素没有设置高度的时候，默认 stretch 拉伸为父容器的高度；

当子元素有高度的时候，就默认flex-start;

flex-start;

flex-end;

center;

flex-wrap: nowrap; (父元素)

在伸缩盒子中，元素如果超出父元素，默认不换行。可以给父元素设置此属性。

元素换行：当子元素有高度的时候，如果换 2 行，默认是侧轴的一半，3 行，则是侧轴的三分之一，以此类推，元素在此行的start位置。

nowrap;(默认)

wrap - 换行

align-content: stretch; (父元素)

设置元素换行后的对齐方式前提要保证元素是换行的

元素换行：当子元素有高度的时候，如果换 2 行，默认是侧轴的一半，3 行，则是侧轴的三分之一，以此类推，元素在此行的start位置。

flex-start;

flex-end;

center;

space-around;

space-between;

stretch; (默认)

space-evenly; (ios专有)

flex: 1; (子元素)

设置子元素所占父元素 剩余 空间的比例

注意是 剩余 ！！！

order

属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

?

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!