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>

结果如下