html基础之弹性布局（dispaly ：flex）
本文直接介绍一些属性，需要注意什么等等类似的不在介绍，知识点导航
父元素属性
- flex-direction:项目的排列方向
flex-wrap:若果一条轴线排不下，如何换行
flex-flow
justify-content
align-items
align-content
子元素属性
- order
flex-grow
flex-shrink
flex-basic
flex
使用之前需在父元素设置“display：flex”
话不多说，直接上代码，基础代码在最下面，会在原有的基础上添加
.parent{display:flex;}
-设置父元素 display: flex; 这会使每个子元素自动变为伸缩项; 所谓伸缩项，就是说当父元素的宽度不足以容纳所有子元素时，会将子元素进行等比例收缩直到父容器足以一行放下所有子元素;
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效
作为父容器的六大属性
1，flex-direction决定主轴的方向（即项目的排列方向）
- row（默认值）：主轴为水平方向，起点在左端
- row-reverse：主轴为水平方向，起点在右端
- column：主轴为垂直方向，起点在上沿
- column-reverse：主轴为垂直方向，起点在下沿
实例：其中只实验了一个属性，对应的图片分别为下图，关于父元素的元素全部都是在 . parent的基础上进行设置
display: flex;
flex-direction: row-reverse;
2，flex-wrap:若果一条轴线排不下，如何换行
- nowrap(默认)：不换行，当容器宽度不够时，每个子元素会被挤压宽度
- rwrap：换行，并且第一行在容器最上方
- wrap-reverse：换行，并且排在第一行容器最下面
width：150px;//原来的宽度太大
display: flex;
flex-direction: row-reverse;
3，flex-flow：是flex-direction和，flex-wrap的缩写。默认值为：flex-flow：row wrap；一般不需要使用
4，justify-content：定义了项目在主轴上的对齐方向
> > 此属性与主轴方向息息相关。
主轴方向为：row - 起点在左边，row-reverse -起点在右边，column - 起点在上边，column-reverse -起点在下边
- flex - start(默认值)：项目位于主轴起点。
- flex-end：主轴位于主轴终点。
- center：居中(常用)；
- space-between：两端对齐，项目之间的距离都相等（开头和最后的子元素，与父容器边缘之间么有间隔）
- space-around：每个项目的间隔相同，切两端间隙是项目间距的一半（开头和最后的项目，与父容器边缘有一定距离）
5，align-items：定义项目在交叉轴如何对齐
- flex-start:交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。
- baseline：项目第一行文字基线对齐（文字的行高，字体大小会影响每行的基线）
这里以baseline为例；但图片还是按取值排列，所以对应的图片是最后一个
font-size：40px//改变第一个子元素的文字大小
<-- 父元素设置 -->
display: flex;
align-items:baseline;
6，align-content:定义了多跟轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
>>当项目换为多行时，可使用align-content取代align-items
- flex - start：与交叉轴起点对齐。
- flex-end：与交叉轴终点对齐。
- center：与交叉轴中点对齐。
- space-between：两端对齐
- spance-around：每根轴线距离相等
display: flex;
align-content：flex - start
关于父元素的属性就介绍到这里。还有一个小的知识点，是我在视频上看见的
.parent{float:flex}
.child{margin:auto}
这个的效果是上下居中，左右分散对齐的效果，感觉就像
justify-content：space-around和
align-items：center的结合体。
很常用
作为子元素的属性
1，order:定义项目的排列顺序。数值越小，排列越靠前。默认为 0
.child_1{order:2}
.child_1{order:1}
2，flex-grow:定义放大比例。默认0。即如果存在剩余空间，也不放大
>>这个可以说是个比例吧，当只有一个子元素设置时，即放大倍数，不过最好几个一起设置
.child_1{flex-grow:1}
.child_2{flex-grow:1}
.child_3{flex-grow:2}
.child_4{flex-grow:2}
如图所示，子元素1,2,3,4都设置的这个属性，效果是在父元素宽度上进行分配。子元素3,4和子元素1,2的比例是1:2
3，flex-shrink：定义了项目的缩小比例。默认为1；即如果空间不足，该项目将缩小
>>这个吧，即在父元素缩小的时候，让这个子元素不缩小，取值试了一下，好像是0-1，如果取值为0.5的话，即子元素最小缩小50%，为0则不能缩小，当然了，如果设置的总宽度超过了父元素，则会在父元素之外显示
.child{flex-shrink:0}
4,flex-basic:项目占据的主轴空间（如过主轴为水平，则设置这个属性，相当于设置宽度，原有width失效）
.child_1{flex-basis: 200px;}
5，flex：此属性是flex-grow，flex-shrink和flex-basic的简写，默认值 0 1 auto，后两个属性可选
基础代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>弹性布局</title>
<style type="text/css">
* {
font-size: 30px;
}
.parent {
width: 500px;
height: 500px;
border: 1px solid red;
}
.child_1 {
width: 50px;
height: 50px;
background: pink;
}
.child_2 {
width: 50px;
height: 60px;
background: blue;
}
.child_3 {
width: 50px;
height: 70px;
background: gray;
}
.child_4 {
width: 50px;
height: 80px;
background: red;
}
.child_5 {
width: 50px;
height: 90px;
background: yellow;
}
</style>
</head>
<body>
<div class="parent">
<div class="child child_1">1</div>
<div class="child child_2">2</div>
<div class="child child_3">3</div>
<div class="child child_4">4</div>
<div class="child child_5">5</div>
</div>
</body>
</html>
结果如下
