简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 弹性盒布局之弹性容器 -php九期线上班
Blogger Information
Blog 33
fans 0
comment 0
visits 19741
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
弹性盒布局之弹性容器 -php九期线上班
取个名字真难
Original
532 people have browsed it

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;}

运行实例 »

点击 "运行实例" 按钮查看在线实例

微信图片_20191105194821.jpg

总结

这些属性虽然还记不全但看着这些属性也能写出来，基本搞明白了这些属性的用法和意思，不过需要加强一下熟练度。

Correction status：qualified

Teacher's comments：要想全部记住, 就得在工作去用它们, 学了就要用到工作中, 尽可能用新技术,尽可能少用传统的老技术了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！