玩转Flex布局

玩转Flex布局

---

---

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、Flex布局是什么？

flex布局时目前web开发中使用最多的布局方案
1>flex布局（Flexible布局，弹性布局）
2>目前特别在移动端用的最多，PC端也使用越来越广泛

二、使用步骤

1.开启flex布局

display: flex;

2.两个重要概念

1.开启flex布局的元素叫做	flex container
2.flex container 的子元叫做	flex items

---

3. 主轴、交叉轴

开启flex布局后，容器有主轴、交叉轴之分

三、详细属性介绍

一般用的最多的是父级容器上的属性，毕竟是由父级容器控制子元素

父级容器属性

小知识:
flex items默认是都是沿着主轴从main start 
开始往 main end方向排布
flex-direction--------------://决定主轴方向
参数:
row: 			主轴从左到右（默认参数）
row-reverse: 	主轴从右向左
column:  		主轴从上到下
column-reverse: 主轴从下到上  

小知识:
将所有的flex-item放在一行，
不换行，放不下了
将元素进行压缩平均等分，
不设置换行，永远不会换行
flex-wrap--------------://决定元素单行多行
参数:
nowrap:单行(默认)
wrap:换行

小知识:
决定flex items 主轴的对齐方式
justify-content--------------:
参数:
flex-start:
flex-end:
center:
space-beteen:	内容两边靠边
space-evenly:	内容平均分布
space-around:	内容两边窄，中间平分空间

小知识:
决定flex items在交叉轴上的对齐方式
（处理单行，多行没效果）
align-items--------------:
参数:
normal:			
效果和stretch效果一样(前提没有限制高度)
stretch:		拉伸并撑满整个交叉轴
flex-start:		与交叉轴顶部对齐
flex-end:		与交叉轴底部对齐
center:			与交叉轴中心点对齐
baseline:		与文本基准线对齐

小知识:
决定多行flex items在交叉轴上的对齐方式
（用于处理多行，单行没效果）
align-content--------------://用法与justify-content 类似
stretch：拉伸(很少用)   	与align-items stretch相似
flex-start  			与交叉轴start对齐
flex-end   				与交叉轴 end 对齐
center					与交叉轴 center对齐
space-between  
space-evenly  			与交叉轴平均对齐
space-around

子元素属性

子元素属性用的少，所以简单介绍一下

flex
flex-grow 
让自身属性成长并按值等分
整数或者百分比(相对于父级容器)
flex-basis
flex-shrink
order 
（用的比较少）与order by联想  排序
给flex-item  设置任意整数，数字越小排在最前
默认值是0
align-self

总结

英语角
flow n 流动 流程 v 流动川流不息
direction n 方向 指导 趋势
evenly ad 平等地 平衡地 平坦地
align vi 排列 排成一行 vt 使结盟