移动端布局之Flex弹性布局

本文链接： https://blog.csdn.net/qq_39206750/article/details/102528361

flex弹性布局
操作方便、布局简单、移动端应用广泛
flex布局原理：
通过给父盒子设置flex属性、来控制子盒子的位置和排列的方式

任何容器都可以指定为flex布局

为父盒子设置了之后、子元素的float、clear和vertical-align属性将失效

设为flex布局的元素、为flexcentainer容器、它的子元素称为flex项目

flex项目也可以继续设置为flex容器

常见的父项的属性：

flex-direction:设置主轴的方向；

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

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

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

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

flex-flow:复合属性、同时设置了主轴方向(flex-direction)与是否换行(flex-warp)

flex-direction:主轴方向

flex中有主轴与侧轴、元素是根据主轴来排列的

默认主轴是 row水平方向、侧轴就是column 垂直方向

也可以设置列column 垂直方向那侧轴就是row 水平方向

flex-direction属性：

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

注意：主轴与侧轴是会变化的、主要是看flex-direction给谁设置为主轴、剩下的就是侧轴、子元素是跟着主轴来排列的

主轴方向图

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

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

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

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

flex-wrap(属性): 默认情况下、项目都在一条轴线上的、默认不换行

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

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

align-items(属性): 默认是y轴、在子项为单项的时候使用

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

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

align-content(属性): 用于子项目出现换行的情况(多行)、单行无效

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

flex-flow 属性:主轴方向与是否换行的复合属性

flex-flow 属性:
说明：flex-direction(主轴方向)和 flex-wrap(是否换行) 属性的复合属性

//复合属性:水平方向 换行
flex-flow:row wrap;

align-content与align-items的区别
说明
align-items 适用用单行、只有上对齐、下对齐、居中与拉伸
align-content 适用于换行(多行)、单行无效、有上对齐、下对齐、居中与拉伸及平均分配剩余空间
总结就是单行找align-items、多行找align-content

item子项属性

item(属性):

属性值	说明
flex	控制项目自己所占容器剩余空间份数
align-self	控制项目自己在侧轴上的排列方式
order	控制顺序

背景线性渐变

默认是从左到右

background:linear-gradient(属性):(起始方向、颜色、颜色2、…)
说明
background:-webkit-linear-gradient(left,red,blue)
background:-webkit-linear-gradient(left top,red)从左上斜角覆盖

Flex弹性布局1
Flex2

flex布局用于排版、rem布局负责等比缩放、很完美

移动端布局之Flex弹性布局

猜你喜欢