HTMl中的弹性布局的实际用法
弹性布局是html中十分方便的一个布局，它可以让结构中的内容自适应不同的分辨率，简化了许多繁琐的代码，今天就简单来介绍一下弹性布局的用法。
弹性布局：
display:flex;顾名思义，就是让内容变得像弹簧一样具有弹性，在需要内容自适应的结构中，它是一个极其方便的工具，它分为主轴和侧轴两个轴，就像X轴跟Y轴一样。
弹性布局的语法分为两块儿：一.加给父容器的语法。二.加给内容的语法。
加给父容器的语法有：
display:flex;
flex-direction:row / column / row-reverse / column-reverse ;
flex-wrap: nowwrap / wrap / wrap-reverse ;
jusitfy-content: flex-start / flex-end / center / space-between / space-around / space-evenly ;
align-content: flex-start / flex-end / center / space-between / space-around / space-evenly ;
align-items： stretch / flex-start / flex-end / center；
加给子元素的语法有：
flex-grow:0~1 ;
flex-shrink:0~1 ;
flex-basis: 具体值;
display:flex;就是将容器转变成一个弹性盒子
flex-direction： ； 就是确定主轴的方向，row水平为主轴，column垂直为主轴。-reverse就是反向，默认水平方向为主轴。
flex-wrap： ； 内容放不下时是否折行。默认不折行nowrap。
jusitfy-content： ；主轴方向上的对齐方式。
flex-start ： 子项都去起始位置对齐。
flex-end ： 子项都去结束位置对齐。
center ： 子项都去中心位置对齐。
space-between : 表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配。
space-around : around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧 的空白只有中间空白宽度一半。
space-evenly : evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。
align-content：；侧轴方向上的对齐方式。
flex-start ： 子项都去起始位置对齐。
flex-end ： 子项都去结束位置对齐。
center ： 子项都去中心位置对齐。
space-between : 表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配。
space-around : around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
space-evenly : evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。
注意！：(最少需要两行才能看出效果，因为他是多行的一个上下对齐方式)，并且有一行它就会把整个容器等分成几份。没有高度时设置除了默认值以外的值他的高度会由内容决定
align-items：；
Stretch默认值
flex-star
flex-end
Center
子元素：
flex-grow：；
0~1（默认为0）
子元素会按照设置的比例值来分配空隙，如果比例值总和小于1，那么会有空隙，如果比例值总和大于等于1，那么就没有空隙。
flex-shrink：；
1~0（默认为1）
0表示不收缩，.5收缩小一些，2收缩大一些。（大小是跟正常缩放1进行比较的）
写0时，他就不收缩了，内容过了会溢出。一些特殊需求会用到
下面时弹性布局的注意点，非常用一犯错。
1.默认情况下，在弹性盒子中的子元素的左右排列的。
2.水平是主轴的时候：默认情况下，当宽高不写的时候，宽度由内容决定，高度由父容器 决定。
垂直是主轴的时候：默认情况下，当宽高不写的时候，宽度由父容器决定，高度 由内容决定。
3.当子项的总宽度大于父容器的时候，会自动收缩的（弹性的优先级是大于自身固定大小的）
4.当子项的内容已经达到了父容器最小宽高的时候，就会出现溢出的现象。
5.弹性布局中用的频率比较多的语法：
display : flex;
flex-direction;
justify-content;
align-items;
flex;
下面写一个弹性布局的基本结构：
没有加弹性的时候默认垂直排列，如下：
<style>
*{margin: 0;padding:0;}
#father{width: 500px;height: 500px;border: 1px solid black;margin: 20px auto;}
#father div{width: 100px;height: 100px;}
#father .one{background: red;}
#father .two{background: green;}
#father .three{background: gray;}
</style>
</head>
<body>
<div id="father">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</body>
给父容器#father加上弹性，默认主轴方向为水平方向：
<style>
*{margin: 0;padding:0;}
#father{width: 500px;height: 500px;border: 1px solid black;margin: 20px auto;
display: flex;
}
#father div{width: 100px;height: 100px;}
#father .one{background: red;}
#father .two{background: green;}
#father .three{background: gray;}
</style>
</head>
<body>
<div id="father">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</body>
此时他会像浮动一样水平排列，并且比浮动的操作方式更简洁。
我们再让改变他的主轴方向上的排列形式：
<style>
*{margin: 0;padding:0;}
#father{width: 500px;height: 500px;border: 1px solid black;margin: 20px auto;
display: flex;
justify-content: space-around;
}
#father div{width: 100px;height: 100px;}
#father .one{background: red;}
#father .two{background: green;}
#father .three{background: gray;}
</style>
<style>
*{margin: 0;padding:0;}
#father{width: 500px;height: 500px;border: 1px solid black;margin: 20px auto;
display: flex;
justify-content: space-evenly;
}
#father div{width: 100px;height: 100px;}
#father .one{background: red;}
#father .two{background: green;}
#father .three{background: gray;}
</style>
可以明显看出space-around与space-evenly的区别。
<style>
*{margin: 0;padding:0;}
#father{width: 500px;height: 500px;border: 1px solid black;margin: 20px auto;
display: flex;
justify-content: space-between;
}
#father div{width: 100px;height: 100px;}
#father .one{background: red;}
#father .two{background: green;}
#father .three{background: gray;}
</style>
侧轴上的则与主轴上的差不多，但是他最少需要两行才能看出效果，上面也说到过。
<style>
*{margin: 0;padding:0;}
#father{width: 500px;height: 500px;border: 1px solid black;margin: 20px auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
}
#father div{width: 100px;height: 100px;}
#father .one{background: red;}
#father .two{background: green;}
#father .three{background: gray;}
</style>
</head>
<body>
<div id="father">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</body>
侧轴便之举一个例子了。
<style>
*{margin: 0;padding:0;}
#father{width: 500px;height: 500px;border: 1px solid black;margin: 20px auto;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
#father div{width: 100px;height: 100px;}
#father .one{background: red;}
#father .two{background: green;}
#father .three{background: gray;}
</style>
</head>
<body>
<div id="father">
<div class="one">测试文字测试文字</div>
<div class="two">测试文字测试文字</div>
<div class="three">测试文字测试文字</div>
</div>
</body>
align-items与align-content的区别：
align-content:center对单行是没有效果的,而align-items:center不管是对单行还是多行都有效果,其实在正常的开发中align-items用的更多这点一定要记住区别。
弹性布局的简单介绍就这么多，想要更深入的了解弹性布局的特性还是需要多敲代码看看不同代码的不同点，这样更容易理解。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
