标签：EDA rap art 就会 水平 默认值 换行 开始 around
弹性容器：在元素上设置了display：flex属性的即为弹性容器，弹性容器上的弹性子元素就会按照弹性布局的方式进行布局
弹性子元素：弹性容器上的直接字元素即为弹性子元素
注意:默认弹性子元素只会排成1行或1列，不会换行。
一、
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #parent{ /*设置id为parent的元素为弹性容器。里面的直接子元素的布局方式即为弹性布局*/ display: flex; width: 900px; height: 900px; background: chocolate; margin: 0 auto; /*弹性布局主轴：确定子元素的布局是水平排布还是竖直排布*/ /*设置主轴的方向：flex-direction 侧轴为主轴的垂直方向 row（默认值）：子元素从左到右进行排布 row-reverse：子元素从右到左进行排布 column：子元素从上到下进行排布 column：子元素从下到上进行排布 * */ flex-direction:row; /*设定主轴的排布方式： justify-content flex-start（默认）向主轴的开始端靠拢 flex-end：向主轴的末尾靠拢 center：向主轴的中间靠拢 space-between：平均分布，两边没有边距 space-around：平均分布两边有边距，两边的边距是中间的一半 space-evenly:平均分布，两边的边距和中间的一样 * */ justify-content: space-evenly; /*设定侧轴的排布方式（单行） align-items： stretch（默认值）：拉伸。在不设置子元素高度的情况下，默认会拉伸到跟父元素一致的的高度。 flex-start：靠近侧轴的开端 flex-end：靠近侧轴的末端 center：在侧轴居中 * */ align-items: center; } .child{ width: 200px; height: 200px; background:pink; } </style> </head> <body> <div id="parent"> <!--div是块级元素，默认占据一整行--> <div class="child" style="background: yellow;">1</div> <div class="child" style="background: violet;">2</div> <div class="child" style="background: cornflowerblue;">3</div> </div> </body> </html>
二、
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .parent{ width: 600px; height: 600px; background:blanchedalmond; margin: 0 auto; display: flex; /*设置弹性可以换行 flex-wrap nowrap(默认)不换行 wrap换行 * */ flex-wrap: wrap; /*设置侧轴的多行排布 stretch(默认拉伸) flex-start:靠近侧轴的开端 flex-end:靠近侧轴的结束端 space-between:平均分布，两边没有间距 space-around：平均分布，两边间距是中间的一半 space-evenly：平均分布，两边的间距和中间一样 * */ align-content: flex-start; } .child{ width: 200px; height: 200px; } </style> </head> <body> <div class="parent"> <div class="child" style="background: yellow;">1</div> <div class="child" style="background: violet;">2</div> <div class="child" style="background: cornflowerblue;">3</div> <div class="child" style="background: yellow;">1</div> <div class="child" style="background: violet;">2</div> <div class="child" style="background: cornflowerblue;">3</div> </div> </body> </html>
剩余空间的分布
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html,body{ height: 100%; } .page{ width: 100%; height: 100%; background: blueviolet; display: flex; } .lanmu{ background: greenyellow; /*flex可以定义剩余空间的占据情况*/ /*分配剩余空间的2份（比例）*/ flex: 2; } .main{ background: teal; /*分配剩余空间的1份*/ flex: 1; } .ad{ width: 200px; background: darkred; } </style> </head> <body> <div class="page"> <div class="lanmu">栏目</div> <div class="main">主要内容</div> <div class="ad">广告</div> </div> </body> </html>
弹性子元素的排布
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #parent{ /*设置id为parent的元素为弹性容器。里面的直接子元素的布局方式即为弹性布局*/ display: flex; width: 900px; height: 900px; background: chocolate; margin: 0 auto; } .child{ width: 200px; height: 200px; background:pink; } .c3{ /*单独对侧轴的子元素进行排布 flex-start flex-end stretch center * */ align-self: center; } </style> </head> <body> <!--order: 在子元素上设置order ，可以按照从小到大的方式进行排序--> <div id="parent"> <!--div是块级元素，默认占据一整行--> <div class="child" style="background: yellow; order: 5;">1</div> <!--一个元素可以有多个类--> <div class="child c3" style="background: violet; order: 3;">2</div> <div class="child" style="background: cornflowerblue;order: 1;">3</div> <div class="child" style="background: violet;order: 2;">4</div> <div class="child" style="background: cornflowerblue;order: 4;">5</div> </div> </body> </html>
标签：EDA rap art 就会 水平 默认值 换行 开始 around
原文地址：https://www.cnblogs.com/a155-/p/12243102.html
