CSS---flex布局中父项常见属性

复习目标:

1. 能够说出 flex 盒子的布局原理

2. 能够使用 flex 布局的常用属性

3. 能够独立完成写成移动端首页案例

传统布局与flex布局有什么区别?

传统布局	flex弹性布局
兼容性好	操作方便, 布局极为简单, 移动端应用很广泛
布局繁琐	PC端浏览器支持情况较差
局限性, 不能在移动端很好的布局	IE 11 或 更低版本, 不支持或仅部分支持

建议:

1. 如果是PC端页面布局, 我们还是使用传统布局

2. 如果是移动端或者不考虑兼容性问题的PC端页面布局, 我们还是使用 flex弹性布局

flex布局原理是什么?

flex 是 flexible Box 的缩写, 意为 "弹性布局", 用来为盒状模型提供最大的灵活性, 任何一个容器都可以指定为 flex 布局

         当我们为父盒子设置 flex布局以后, 子元素的float, clear 和 vertical-align 属性将失效

          伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局

采用Flex布局的元素, 称为Flex 容器 (flex container), 简称"容器". 它的所有子元素自动成为容器成员, 称为 Flex项目 (flex item) 简称"项目".

                体验中div就是 flex父容器

                体验中 span就是子容器 flex项目

                子容器可以横向排列也可以纵向排列

总结flex布局原理:

就是通过给父盒子添加 flex属性, 来控制子盒子的位置和排列方式

---

常见父项属性

以下由6个属性事对父元素设置的

flex-direction: 设置主轴的方向

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

flex-wrap: 设置子元素是否换行

align-content: 设置侧轴上的子元素的排列方式(多行)

align-items:  设置侧轴上的子元素排列方式 (单行)

flex-flow: 复合属性, 相当于同时设置了 flex-direction 和 flex-wrap

flex-direction 设置主轴的方向

        flex-direction 属性决定主轴的方向 (即项目的排列方向)

        注意: 主轴和侧轴是会变化的, 就看flex-direction设置谁为主轴. 剩下的就是侧轴. 而我们的子元素是跟着主轴来排列的

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

 元素是跟着主轴排列的

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

justify-content 属性定义了项目在主轴上的对齐方式

注意: 使用这个属性之前一定要确定好主轴是哪个

 

属性值	说明
flex-start	默认值, 从头开始 如果主轴是 x轴, 则从左到右
flex-end	从尾部开始排列
center	在主轴居中对齐 (如果主轴是x轴则 水平居中)
space-around	平分剩余空间
space-between	先两边贴边 再平分剩余空间

flex布局中, 默认的子元素是不换行的  如果装不下, 则会缩小子元素的宽度, 放到父元素里面

 flex-wrap 设置子元素是否换行

默认情况下, 项目都排在一条线(又称为"轴线") 上, flex-wrap属性定义, flex布局中默认是不换行的

属性值	说明
nowrap	默认值, 不换行
wrap	换行

align-items 设置侧轴上的子元素排列方式 (单行) 

        该属性是控制子项在侧轴( 默认是y轴 ) 上的排列方式 在子项为单项(即单行)的时候使用

     

属性值	说明
flex-start	从上到下
fiex-end	从下到上
center	挤在一起居中(垂直集中)
stretch	拉伸(默认值)

align-content 设置侧轴上的子元素的排列方式 (多行)

设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况(多行), 在单行下是没有效果的

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

align-content 和 align-items 区别

        align-items 适用于单行情况下, 只有上对齐,下对齐, 居中和拉伸

        align-content  适用于换行 (多行) 的情况下 (单行情况下无效), 可以设置上对齐, 下对齐, 居中, 拉伸以及平均分配剩余空间等属性值    (前提是有换行  flex-wrap: wrap; )

        总结就是单行找 align-items  多行找align-content

flex-flow

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

例子:  flex-flow: row wrap;   

        

总结:

        一般先设置主轴的方向 这个直接影响我们后续部分写的是否正确

               其次: 设置主轴上子元素排列的方式

               然后  选择侧轴的子元素的排列方式(侧轴排列方式有两种 单行的和多行的) 

        flex-direction: 设置主轴方向

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

        flex-wrap: 设置子元素是否换行

        align-items: 设置侧轴上的子元素的排列方式 (单行)

        flex-flow: 复合属性, 相当于同时设置了 flex-direction 和 flex-wrap

        align-content:  设置侧轴上的子元素的排列方式(多行)