CSS3 弹性盒子(Flex Box)
弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
官网地址学习路径:CSS3 弹性盒子-JavaScript中文网-JavaScript教程资源分享门户
CSS3 弹性盒子属性
第一个属性 flex-direction属性
flex-direction
flex-direction 属性指定了弹性子元素在父容器中的位置。
语法
flex-direction: row | row-reverse | column | column-reverse
flex-direction的值有:
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
注意:flex-direction定义轴的方向是X or Y
<style> div{ background-clip: padding-box; } #father { height: 400px; width: 600px; border: 1px solid red; background-color: gold; display: flex; /* row：横向从左到右排列（左对齐），默认的排列方式。 row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。 */ flex-direction: column; } #father div { height: 60px; width: 60px; border: 1px solid black; } </style> <div id="father"> <!-- 我是father的盒子 --> <div>我是第几个1div</div> <div>我是第几个2div</div> <div>我是第几个3div</div> <div>我是第几个4div</div> <div>我是第几个5div</div> <div>我是第几个6div</div> </div>
图一
flex-direction: column-reverse;
在图一的基础上变动flex-direction: column-reverse;
<style> #father1 { height: 400px; width: 500px; border: 1px solid red; background-color: azure; display: flex; /* row：横向从左到右排列（左对齐），默认的排列方式。 row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。 */ flex-direction: row; flex-direction: row-reverse; } #father1 div { height: 60px; width: 60px; border: 1px solid black; } </style> <div id="father1"> <!-- 我是father的盒子 --> <div>我是第几个1div</div> <div>我是第几个2div</div> <div>我是第几个3div</div> <div>我是第几个4div</div> <div>我是第几个5div</div> <div>我是第几个6div</div> </div>
图三
第二个属性 justify-content 属性
justify-content 属性
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
justify-content 语法如下：
justify-content: flex-start | flex-end | center | space-between | space-around
flex-start：
弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
flex-end：
弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
center：
弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
space-between：
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
space-around：
弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。
<!-- justify-content 属性 内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。 --> <style> #father2 { height: 600px; width: 600px; border: 1px solid red; background-color: yellowgreen; display: flex; /* row：横向从左到右排列（左对齐），默认的排列方式。 row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。 */ flex-direction: row; /* flex-direction: row-reverse; */ justify-content: flex-start; /* 弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。 */ justify-content: flex-end; /* 弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。 */ } #father2 div { background-color: azure; height: 60px; width: 60px; border: 1px solid black; } </style> <div id="father2"> <!-- 我是father的盒子 --> <div>我是第几个1div</div> <div>我是第几个2div</div> <div>我是第几个3div</div> <div>我是第几个4div</div> <div>我是第几个5div</div> <div>我是第几个6div</div> </div>
<style> #father3 { height: 600px; width: 600px; border: 1px solid red; background-color: yellowgreen; display: flex; /* row：横向从左到右排列（左对齐），默认的排列方式。 row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。 */ flex-direction: row; /* 弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。 */ justify-content: center; } #father3 div { background-color: azure; height: 60px; width: 60px; border: 1px solid black; } </style> <div id="father3"> <!-- 我是father的盒子 --> <div>我是第几个1div</div> <div>我是第几个2div</div> <div>我是第几个3div</div> <div>我是第几个4div</div> <div>我是第几个5div</div> <div>我是第几个6div</div> </div>
<style> #father4 { height: 600px; width: 600px; border: 1px solid red; background-color: yellowgreen; display: flex; /* 弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。 */ justify-content: space-between; } #father4 div { background-color: azure; height: 60px; width: 60px; border: 1px solid black; } </style> <div id="father4"> <!-- 我是father的盒子 --> <div>我是第几个1div</div> <div>我是第几个2div</div> <div>我是第几个3div</div> <div>我是第几个4div</div> <div>我是第几个5div</div> <div>我是第几个6div</div> </div>
<style> #father5 { height: 600px; width: 600px; border: 1px solid red; background-color: yellowgreen; display: flex; /* 弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。 */ justify-content: space-around; } #father5 div { background-color: azure; height: 60px; width: 60px; border: 1px solid black; } </style> <div id="father5"> <!-- 我是father的盒子 --> <div>我是第几个1div</div> <div>我是第几个2div</div> <div>我是第几个3div</div> <div>我是第几个4div</div> <div>我是第几个5div</div> <div>我是第几个6div</div> </div>
