目录

前言

一、什么是Flex？

二、Flex布局父项常见属性 

        2.1 flex-direction设置主轴的方向

        2.2 justify-content设置主轴上的子元素排列方式

        2.3 flex-wrap子元素是否换行

        2.4 c设置侧轴上的子元素排列方式（单行）

                 2.5 align-content设置侧轴上的子元素的排列方式（多行）

                 2.6 flex-flow

总结

---

前言

        布局的传统解决方案，基于盒子模型，依赖display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。如果使用Flex布局，可以简便、完整、响应式地实现各种页面布局。

一、什么是Flex？

        Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可使用Flex布局。

        布局原理：通过给父盒子添加Flex属性，来控制盒子的位置和排列方式

.box{display: flex;
}

Flex布局体验：

        传统布局：①兼容性好
                          ②布局繁琐
                          ③局限性，不能在移动端很好布局

        flex弹性布局：

                          ①操作方便，布局简单，移动端应用广泛
                          ②pc端浏览器支持情况较差
                          ③IE 11或更低版本，不支持或仅部分支持

二、Flex布局父项常见属性 

        2.1 flex-direction设置主轴的方向

                        默认主轴方向就是x轴方向，水平向右
                        默认侧轴方向就是y轴方向，水平向下

属性值
row	默认值从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

                                                        表2.1-flex-direction

  示例：设置y轴为主轴，三个天蓝色的span标签从上往下排列，只需要使用属性值flex-direction:              column;

<style>div {display: flex;width: 800px;height: 300px;background-color: pink;flex-direction: column;}div span {width: 150px;height: 100px;background-color: skyblue;}</style>

效果图：

图2.1flex-direction效果图

        2.2 justify-content设置主轴上的子元素排列方式

属性	备注
flex-start	默认值，从头开始，如果主轴是x轴，则从左往右
flex-end	从尾部开始排列
center	在主轴居中对齐，如果主轴是x轴则水平居中
space-around	平分剩余空间
space-between	先两边贴边，再平分剩余空间（重要）

                                                表2.2-justify-content

使用space-around来举例子：        

        设置好基础宽高之后，再使用display：flex，最后添加 justify-content：space-around，平分          剩余的空间

<style>div {display: flex;width: 800px;height: 300px;background-color: pink;flex-direction: row;/* justify-content: space-around/flex-start/flex-end/center/space-between */justify-content: space-around;}div span {width: 150px;height: 100px;background-color: purple;}</style>

效果图：

图2.2-space-around

        2.3 flex-wrap子元素是否换行

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

        注意：如果元素不是弹性盒对象的元素，则 flex-wrap 属性不起作用。

没有使用之前：

图2.3(a) flex-wrap 

使用之后：

<style>div {display: flex;width: 600px;height: 300px;background-color: pink;flex-wrap: wrap; }div span {width: 150px;height: 100px;background-color: purple;margin: 10px;}</style>

 效果图：

图2.3(b) flex-wrap 

        2.4 c设置侧轴上的子元素排列方式（单行）

                     我们先看有哪些属性值：

属性值	备注
align-items：flex-start	默认值，从上到下
align-items：flex-end	从下到上
align-items：center	挤在一起居中，垂直居中
align-items：stretch	拉伸，子盒子不能设宽度

表2.4 align-items

              在以前如果我们想让盒子垂直居中，设置起来是非常麻烦的，现在只需要align-items：center添加到父元素里可以了，下面举个例子还实现水平垂直居中。代码如下：

注：只适用于单行

<style>div {display: flex;width: 800px;height: 200px;background-color: pink;justify-content: center;  //水平居中align-items: center; //垂直居中}div span {width: 150px;height: 100px;background-color: purple;margin: 10px;}</style>

效果图：

        2.5 align-content设置侧轴上的子元素的排列方式（多行）

属性值	备注
flex-start	默认值在侧轴的头部开始
flex-end	在侧轴的尾部开始
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余空间
stretch	设置子项元素高度平分父元素高度

表2.5 align-content

 我们还是用align-content: space-between属性展示一下：

        这里用了flex-wrap：wrap允许换行，不然也会一排显示甚至压缩子盒子原本的大小来显示

 <style>div {display: flex;width: 800px;height: 400px;background-color: pink;flex-wrap: wrap; //换行align-content: space-between;}div span {width: 150px;height: 100px;background-color: purple;margin: 10px;}</style>

效果图：

图2.5 align-content

 这样就实现了子项在侧轴先分布在两头，再平分剩余空间。

        2.6 flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。

 flex-flow: column wrap;

总结

        以上就是flex布局父项常见属性的前三个。总而言之，使用Flex布局，可以轻松完成垂直居中，简便、完整、响应式地实现各种页面布局。关于flex布局子项常见属性将在下回为大家讲解