flex布局

目录

一、Flex

二、Flex布局

 三、换行

 四、对齐方式

五、子元素排列顺序：

六、 放大子元素flex-grow

七、缩小 flex-shrink

八、flex-basis设置子元素宽度

九、flex

十、使个别子元素拥有与其他子元素不同的排序方式

---

一、Flex

Flex 布局，可以简便、完整、响应式地实现各种页面布局

二、Flex布局

使用Flex设置布局时，一定要给其一个父元素，使父容器开启Flex布局，子元素即可实现flex布局

页面的基本标签

为元素设置基本的样式

此时的页面预览：

 在父元素中开启flex布局，flex布局页面显示类似于浮动，可将块级元素一行显示，且可使其左右居中对齐

开启flex布局后的页面显示

 注意，flex布局分主轴和交叉轴，默认情况下，主轴和交叉轴的位置如下

 但根据用户的不同需求可改变主轴和交叉轴的方向，且属性是以主轴为标准的，所以属性也会跟随着主轴和交叉轴的改变而改变

改变主轴和交叉轴的方向，注意：在父元素中写代码

 此时的页面：

其余两种方向

页面预览：

第一种

 第二种：

 三、换行

为页面设置超过父容器宽度的子元素数量

 则页面展示

 

 在代码中，设置的子元素宽度是100px，父容器的宽度是500px，此时有六个子元素，因此当子元素一行排列时，子元素的宽度会超过父容器的宽度，此时的子元素会等比例缩小宽度，使其适应父容器的宽度

若不想子元素缩小宽度，想使最后一个子元素换行，则在父容器中设置

 则页面效果，注意，这是控制主轴上是否换行

 flex-direction和 flex-wrap可以简写为flex-flow:flex-direction  flex-wrap；

页面效果 ：

 四、对齐方式

主轴上的对齐：

缩减子元素数量，使其在父容器中有间隙

在父容器中编写：

 页面显示：

 justify-content属性的其他取值flex-start左对齐，center 为居中，flex-end为右对齐，

                        space-between为左右两端对齐，

                        space-around为项目之间间距为左右两侧项目到容器间距的2倍

                        space-evenly为项目之间间距与项目与容器间距相等

交叉轴上的对齐：

页面预览：

 交叉轴对齐的参数（align-items）：

                        flex-start  让其在交叉轴的方向上紧贴容器顶部

                        flex-end   让其在交叉轴的方向上紧贴容器底部

                        center      让其在交叉轴的方向上在中心位置排列

                        baseline   让其以第一行文字的基线为参照进行排列

 多行对齐

给flex父元素增加多个子元素

 此时的页面预览

 让其子元素换行显示

 此时的页面预览：

 给多行子元素对齐显示

页面预览：

注意：多行对齐要在换行的基础上使用，若父元素对子元素无换行显示，则对行对齐没有效果，多行对齐的参数与主轴对齐和交叉轴对齐的效果一样

多行对齐（align-content）：flex-start、flex-end、center、space-between、space-around、space-evenly

 注意：以上的属性，都只能在父元素上使用，不能在子元素上使用

五、子元素排列顺序：

将子元素删减到原来的三个

 排列order，未指定时，默认为0，数值越小，子元素排列越靠前

页面预览：

六、 放大子元素flex-grow

默认情况下为0，用于决定在父容器有剩余空间的情况下是有将子元素放大，注意：即使给子元素设置了固定宽度，也会放大

页面预览 ：

可在多个子元素上设置放大属性：

即将父元素剩余部分分为两份，两个子元素各占一份

页面预览

七、缩小 flex-shrink

默认值为1，即当父容器的宽度不够子元素一行排列时，子元素是否等比例缩小，默认为1，即当父容器宽度不够时，子元素等比例缩小一行排列

当将flex-shrink设置为0时，则表示即使父容器空间不够，子元素也不缩小

改变子元素宽度

此时的页面预览

三个子元素等比例缩小

是其子元素均不缩小

页面预览：

子元素会超出父容器

八、flex-basis设置子元素宽度

默认auto时，子元素会默认保持width设置的宽度，但若设置了flex-basis，则他的权重会高于width，因此会覆盖width的属性

为了证明flex-basis的优先级大于width，可将flex-basis属性写在width的前面

此时的页面预览

九、flex

flex是flex-grow、flex-shrink、flex-basis的简写，顺序不可颠倒，用于定义项目放大，缩小与宽度

其中最常用的为flex:1==flex:1 1 0px

页面预览：

十、使个别子元素拥有与其他子元素不同的排序方式

注意：要继承与父容器的align-items属性

 

将中间的子元素2居中显示

此时的页面预览：

 注意：之后的属性只能在子元素上使用