浅析flex 布局

转:https://www.cnblogs.com/wangrenmeng/p/10423975.html

Flex基本概念：

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

flex容器中的每个单元块被称作flex item，其实flex布局的属性虽然分为父级容器的属性和子级容器的属性，但是其实所有的效果都是作用在子级容器上的，只不过父级容器的属性作用的是子集容器整体或者说是所有的子级容器。

如何创建flex布局？

给div这种块状元素元素设置display:flex或者给span这种内联元素设置display:inline-flex，flex布局就创建完成了

属性介绍以及示例：

• 作用在父元素上的属性。

1.flex-direction  控制flex子项整体的布局方向。

row ： 子项按照布局顺序从浏览器的左侧开始横向排列

row-reverse ：子项按照布局顺序从浏览器的右侧开始横向排列

column ：子项按照布局顺序从浏览器的顶端开始竖向排列

column-reverse：子项按照布局倒序从浏览器的顶端开始竖向排列

　2.flex-wrap  控制子项整体是单行显示还是换行显示，如果换行上下左右的方向是否反方向显示

nowrap：不换行，宽度不够时子项进行缩小

　　wrap：换行显示

wrap-reverse：反方向换行显示

3.flex-flow 上面两个属性的缩写形式

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

默认值：row nowrap

　4.justify-content  控制子项整体在水平方向上的对齐方式和分布方式

flex-start：与主轴的开始位置对齐

flex-end：与主轴的结束位置对齐

center：在主轴的中间位置

space-between：在水平方向上两端对齐

space-around：环绕对齐，子项左右两边的空余距离相等。

space-evenly：均分对齐，子项和子项之间包括子项和两端的距离相等

　5.align-items  控制子项们在垂直方向上的对齐方式

stretch：

flex-start：主轴的开始位置对齐

flex-end：主轴的结束位置对齐

center：中间对齐

baseline：子项内容的基线对齐。

6.align-content  控制子项整体在垂直方向上的对齐方式和分布方式

flex-start：在主轴的开始位置对齐

flex-end：主轴的结束位置对齐

center：主轴中心对齐

space-between：两端对齐

space-around：环绕对齐（同上）

space-evenly：等距对齐

• 　作用在子元素上的属性

任何子项都没有设置多余的属性时，子项按照内容顺序从左到右一次排序

html代码：<br><div class="flexFather flexFather1">
    <div class="child child1" style="background-color: aquamarine">1</div>
    <div class="child child2" style="background-color: palevioletred">2</div>
    <div class="child child3" style="width:200px;background-color: peachpuff">3</div>
</div>

css代码：<br>.flexFather{
    display: flex;
    flex-direction: row;
    height:600px;
}
.flexFather .child{
    flex-basis:400px;
    height:100px;
    width: 100px !important;
    font:bold 20px/100px "Micsoroft";
    text-align: center;
}