弹性盒子笔记总结

Posted 2021-08-29 月疯

弹性盒子：控制子元素的布局方式

1、display:flex 

   作用：让当前元素形成弹性盒，控制子元素布局！

   特点：

1. 弹性盒子的子元素默认情况下，都是沿着主轴排列，默认情况下主轴为x轴。
2. 弹性盒里面的子元素都能直接添加宽高。
3. 让弹性盒里面一个子元素左右上下居中，直接给子元素添加margin: auto;

2、flex-diretion(改变主轴的排列方向)

   顺序制定了弹性盒子在父容器中的位置

1. row默认再一行内排列
2. row-reverse：翻转横向排列（右对齐，从后往前排，最后一项排在最前面）
3. column：纵向排列
4. column-reverse：反转纵向排列，从下往上排，最后一项排在最上面

3、justify-content(主轴对齐方式)

   说明：

        内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐

1. flex-start默认，顶端对齐
2. flex-end末端对齐
3. center居中对齐
4. space-between俩段对齐，中间自动分配
5. space-around自动分配距离

4、侧轴的对齐方式

align-items

属性值：

1、Flex-start：弹性盒子元素的侧轴起始位置的边界紧靠住该行的侧轴起始边界。

2、Flex-end：弹性盒子元素的侧轴起始位置的边界紧靠朱该行的侧轴结束边界。

3、Center：弹性盒子元组再该行的侧轴上居中放置。

4、Baseline：如果弹性盒子元素的行内与侧轴为同一条，则该值与flex-start等效。其他情况下，该值将参与基线对齐。

1. flex-wrap

说明：

该属性控制flex容器是单行或者多行，同时横轴的方向决定了新堆叠的方向。

Nowrap：flex容器为单行。该情况下flex子项可能会溢出容器

Wrap: flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行

Wrap-reverse：反转wrap排列

1. align-content（行与行之间对齐方式）

说明

     当伸缩容器的侧轴还有多余空间时，本属性可以用来调准【伸缩行】在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的<justify-content>属性类似。请注意本属性在只有一行的伸缩容器上没有效果。

1. flex-start没有行间距
2. flex-end底对齐没有行间距
3. center居中没有行间距
4. space-between俩段对齐，中间自动分配
5. space-around自动分配距离

1. align-self（控制单个子元素的对齐方式）

说明：

Align-self属性规定灵活容器内被选中项目的对齐方式。

注意：align-self属性可重写灵活容器的align-items属性。

1. auto 默认值。元素继承了它的父容器的align-items属性。如果没有父容器则为“strech”。
2. Stretch 元素被拉伸以适应容器
3. Center 元素位于容器的中心
4. Flex-start元素位于容器的开头
5. Flex-end 元素位于容器的结尾

       注意：intenet Explorer和Safari浏览器不支持align-self属性。

1. order

说明：排序（控制子元素的先后顺序）数值越大越往后排列，支持负数，默认是0

1. flex分配主轴上的剩余空间

说明：

符合属性。设置火箭所弹性盒模型对象的子元素如何分配空间。

  缩写【flex:1】则其计算值为【110%】

缩写【flex:auto】，择期计算值为【11auto】

Flex：none，则其计算值为00auto

Flex：0 auto或者flex：index，则其计算值为01 auto，即flex初始值

1. flex三个属性值介绍

1. flex-grow一个数字，规定项目将相对于其他的项目进行扩展的量
2. flex-shnink 一个数字规定项目将相对于其他的项目进行收缩的量
3. flex-basis项目长度