html代码
实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style1.css"> <title>Document</title> </head> <body> <h1>块级弹性容器</h1> <div class="content flex"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> </div> <h1>行内块级_弹性容器</h1> <div class="content inline-flex"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> </div> <hr> <h1 >弹性容器常用属性flex-direction: </h1> <h2 >1、flex-direction:row; 沿水平主轴让元素从左向右排列(默认选项)</h2> <p>多行</p> <div class="content flex"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> </div> <p>单行</p> <div class="content inline-flex row-reverse"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> </div> <h2 >2、flex-direction:row-reverse; 弹性元素在主轴上从右向左排列</h2> <p>多行</p> <div class="content flex row-reverse"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> <span class="item">弹性4</span> <span class="item">弹性5</span> <span class="item">弹性6</span> </div> <p>单行</p> <div class="content inline-flex row-reverse"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> </div> <h2 >3、flex-direction:column; 弹性元素在主轴上从上向下排列</h2> <p>多行</p> <div class="content flex column"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> </div> <p>单行</p> <div class="content inline-flex column"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> </div> <h2 >4、flex-direction:column-reverse; 弹性元素在主轴上从下向上排列</h2> <p>多行</p> <div class="content flex column-reverse"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> </div> <p>单行</p> <div class="content inline-flex column-reverse"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> </div> <h1 >弹性容器常用属性flex-wrap: </h1> <h2 >1、flex-wrap:norap; 弹性元素在主轴上是否换行(默认不换)</h2> <p>多行</p> <div class="content flex norwap"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> </div> <p>单行</p> <div class="content inline-flex norwap"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> </div> <h2 >2、flex-wrap:wrap; 弹性元素在主轴上换行</h2> <p>多行</p> <div class="content flex wrap"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> <span class="item">弹性4</span> <span class="item">弹性5</span> <span class="item">弹性6</span> <span class="item">弹性7</span> <span class="item">弹性8</span> <span class="item">弹性9</span> </div> <p>单行</p> <div class="content inline-flex wrap"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> <span class="item">弹性4</span> </div> <h2 >3、flex-wrap:wrap-reverse; 弹性元素在主轴上换行相反顺序显示</h2> <p>多行</p> <div class="content flex wrap-reverse"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> <span class="item">弹性4</span> <span class="item">弹性5</span> <span class="item">弹性6</span> <span class="item">弹性7</span> <span class="item">弹性8</span> <span class="item">弹性9</span> </div> <p>单行</p> <div class="content inline-flex wrap-reverse"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> <span class="item">弹性4</span> </div> <h2 >4、flex-flow;flex-direction, flex-wrap 弹性元素在主轴上换行相反顺序显示，定义主轴方向以及弹性元素是否换行,`flex-direction`和`flex-wrap`简写|</h2> <p>多行</p> <div class="content flex flex-flow"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> <span class="item">弹性4</span> <span class="item">弹性5</span> <span class="item">弹性6</span> <span class="item">弹性7</span> <span class="item">弹性8</span> <span class="item">弹性9</span> </div> <p>单行</p> <div class="content inline-flex flex-flow"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> </div> <h1 >弹性容器常用属性justify-content: </h1> <h2 >1、justify-content;flex-start(默认值) 弹性盒子元素将向行起始位置对齐。</h2> <p>多行</p> <div class="content flex flex-start"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> </div> <p>单行</p> <div class="content inline-flex flex-start"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> </div> <h2 >2、justify-content;flex-end:弹性盒子元素将向行结束位置对齐。</h2> <p>多行</p> <div class="content flex flex-end"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> </div> <p>单行</p> <div class="content inline-flex flex-end"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> </div> <h2 >3、justify-content;center:弹性盒子元素将向行中间位置对齐。</h2> <p>多行</p> <div class="content flex center"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> <span class="item">弹性4</span> <span class="item">弹性5</span> <span class="item">弹性6</span> <span class="item">弹性7</span> <span class="item">弹性8</span> <span class="item">弹性9</span> </div> <p>单行</p> <div class="content inline-flex center"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> </div> <h2 >4、justify-content;space-between:最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。</h2> <div class="content space-between"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> </div> <h2 >5、justify-content;space-around:弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。</h2> <div class="content space-around"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> </div> <h2 >5、justify-content;space-evenly:每个元素之间和元素距离边距的距离都相等,这个属性兼容性不好。</h2> <div class="content space-evenly"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> <span class="item">弹性4</span> <span class="item">弹性5</span> </div> <h1 >弹性容器常用属性align-items: </h1> <h2 >1、align-items:stretch：侧轴（纵轴）方向上元素被拉伸以适应容器（默认）。</h2> <div class="content stretch"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> </div> <h2 >2、align-items:flex-start：元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界</h2> <div class="content start"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> </div> <h2 >3、align-items:flex-end：元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界</h2> <div class="content end"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> </div> <h2 >4、align-items:center：元素在该行的侧轴（纵轴）上居中放置</h2> <div class="content items-center"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> </div> <h1 >弹性容器常用属性align-content: </h1> <h2 >1、align-content：stretch;元素被拉伸以适应容器,各行将会伸展以占用剩余的空间默认。</h2> <div class="content content-stretch"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> </div> <h2 >2、align-content：flex-start;各行向弹性盒容器的侧轴上的起始位置堆叠。</h2> <p>多行容器</p> <div class="content content-start"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> </div> <h2 >3、align-content：flex-end;各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行。</h2> <p>多行容器</p> <div class="content content-end"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> </div> <h2 >4、align-content：center;各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐.</h2> <p>多行容器</p> <div class="content center"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> </div> <h2 >5、align-content：space-between;首尾元素紧贴起止点,其它元素平分剩余空间</h2> <p>多行容器</p> <div class="content flex space-between"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> <span class="item">弹性4</span> <span class="item">弹性5</span> <span class="item">弹性6</span> </div> <h2 >6、align-content：space-around;每个元素二边空间相等,相邻元素空间累加</h2> <p>多行容器</p> <div class="content flex space-around"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> <span class="item">弹性4</span> <span class="item">弹性5</span> <span class="item">弹性6</span> </div> <h2 >7、align-content：space-evenly每个元素, 以及元素到与起止点的空间全部相等</h2> <p>多行容器</p> <div class="content flex space-evenly"> <span class="item">弹性1</span> <span class="item">弹性2</span> <span class="item">弹性3</span> <span class="item">弹性4</span> <span class="item">弹性5</span> <span class="item">弹性6</span> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
css代码
实例
/*弹性容器通用样式*/
.content{
border: 2px dashed red;
margin: 15px;
background: #cdc;
background-color: antiquewhite;
display: flex; box-sizing: border-box;
}
/*弹性元素通用样式*/
.item {
box-sizing: border-box;
padding: 20px;
background: #ede;
border: coral 1px solid;
}
/*1、flex-direction:row; 沿水平主轴让元素从左向右排列(默认选项)*/
/*块级弹性容器*/
.flex {
display: flex;
}
/*行内块级弹性容器*/
.inline-flex {
display: inline-flex;
}
/*33、flex-direction:column; 弹性元素在主轴上从上向下排列*/
.column{flex-direction:column;}
/*4、flex-direction:column-reverse; 弹性元素在主轴上从下向上排列*/
.column-reverse{flex-direction:column-reverse;}
/*flex-wrap:norap; 弹性元素在主轴上是否换行(默认不换)*/
.norwap{flex-wrap:nowrap;}
/*flex-wrap:norap; 弹性元素在主轴上换行*/
.wrap{flex-wrap:wrap;width:200px;}
/*3、flex-wrap:wrap-reverse; 弹性元素在主轴上换行相反顺序显示*/
.wrap-reverse{flex-wrap:wrap-reverse;width: 200px;}
/*4、flex-flow;flex-direction, flex-wrap 弹性元素在主轴上换行相反顺序显示，定义主轴方向以及弹性元素是否换行,`flex-direction`和`flex-wrap`简写*/
.flex-flow{flex-flow:row wrap-reverse;width: 200px;}
/*1、justify-content;flex-start(默认值) 弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐*/
.flex-start{justify-content: flex-start;}
/*2、justify-content;flex-end:弹性盒子元素将向行结束位置对齐。*/
.flex-end{justify-content: flex-end;}
/*3、justify-content;center:弹性盒子元素将向行中间位置对齐。*/
.center{justify-content: center;}
/*4、space-between:最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。*/
.space-between{justify-content:space-between;}
/*5、justify-content;space-around:弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。*/
.space-around{justify-content:space-around;}
/*5、justify-content;space-evenly:每个元素之间和元素距离边距的距离都相等。*/
.space-evenly{justify-content: space-evenly;}
/*1、align-items:stretch：侧轴（纵轴）方向上元素被拉伸以适应容器（默认）。*/
.stretch{align-items:stretch;height:300px;}
/*2、align-items:flex-start：元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界*/
.start{align-items:flex-start;height:400px;}
/*3、align-items:flex-end：元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界*/
.end{align-items:flex-end;height:300px;}
/*.4、align-items:center：元素在该行的侧轴（纵轴）上居中放置*/
.items-center{align-items:center;height:300px;}
/*1、align-content：stretch;元素被拉伸以适应容器,各行将会伸展以占用剩余的空间默认。*/
.content-stretch{align-content: stretch;height:100px;}
/*2、align-content：flex-start;各行向弹性盒容器的起始位置堆叠。*/
.content-start{align-content: flex-start;height:300px;}
/*3、align-content：flex-end;各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行*/
.content-end{align-content:flex-end;height:300px;}
/*4、align-content：center;各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐.<*/
.center{align-content: center;}
/*5、align-content：space-between;第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。
*/
.between1{align-content: space-between;}
/*6、align-content：space-around;每个元素二边空间相等,相邻元素空间累加*/
.around1{ align-content: space-around;
}
/*6、align-content：space-evenly每个元素, 以及元素到与起止点的空间全部相等*/
.evenly1{align-content: space-evenly;}运行实例 »
点击 "运行实例" 按钮查看在线实例
总结
这些属性虽然还记不全但看着这些属性也能写出来，基本搞明白了这些属性的用法和意思，不过需要加强一下熟练度。