flex(弹性布局)教程之常用布局

球盲發表於 2022-9-7 08:43:53

<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">一、Flex 布局是什么？</a></li><ul class="second_class_ul"><li><a href="#_lab2_0_0">任何一个容器都可以指定为 Flex 布局。</a></li><li><a href="#_lab2_0_1">行内元素也可以使用 Flex 布局。</a></li><li><a href="#_lab2_0_2">Webkit 内核的浏览器，必须加上-webkit前缀。</a></li></ul><li><a href="#_label1">二、常用布局</a></li><ul class="second_class_ul"><li><a href="#_lab2_1_3">公共样式：</a></li><li><a href="#_lab2_1_4"> 垂直居中子元素左右分布</a></li><li><a href="#_lab2_1_5">水平垂直居中</a></li><li><a href="#_lab2_1_6">水平垂直居中图标在上文字在下</a></li><li><a href="#_lab2_1_7">子元素平分父元素,且自适应等高</a></li><li><a href="#_lab2_1_8"> 子元素平分父元素,两边对齐中间自适应相同宽度间隔，且自动换行</a></li><li><a href="#_lab2_1_9"> 三栏布局,两边固定宽中间自适应</a></li></ul></ul></div><p>2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。</p>
<p class="maodian"><a name="_label0"></a></p><h2>一、Flex 布局是什么？</h2>
<p>Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。</p>
<p class="maodian"><a name="_lab2_0_0"></a></p><h3>任何一个容器都可以指定为 Flex 布局。</h3>
<div class="jb51code"><pre class="brush:css;">.box{
display: flex;
}</pre></div>
<p class="maodian"><a name="_lab2_0_1"></a></p><h3>行内元素也可以使用 Flex 布局。</h3>
<div class="jb51code"><pre class="brush:css;">.box{
display: inline-flex;
}</pre></div>
<p class="maodian"><a name="_lab2_0_2"></a></p><h3>Webkit 内核的浏览器，必须加上-webkit前缀。</h3>
<div class="jb51code"><pre class="brush:css;">.box{
display: -webkit-flex; /* Safari */
display: flex;
}
</pre></div>
<p>注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。</p>
<p class="maodian"><a name="_label1"></a></p><h2>二、常用布局</h2>
<p class="maodian"><a name="_lab2_1_3"></a></p><h3>公共样式：</h3>
<div class="jb51code"><pre class="brush:xhtml;"> <style>
* {
margin: 0;
padding: 0;
}

.has-flex {
display: flex;
}
</style></pre></div>
<p class="maodian"><a name="_lab2_1_4"></a></p><h3> 垂直居中子元素左右分布</h3>
<p>css</p>
<div class="jb51code"><pre class="brush:css;"> .father-one {
width: 100%;
height: 200px;
background-color: #fffcef;
align-items: center; /*纵轴）方向上的对齐方式。*/
justify-content: space-between; /* 均匀排列每个元素首个元素放置于起点，末尾元素放置于终点,中间元素的中间间隔相等 */
justify-content: space-around; /* 均匀排列每个元素每个元素周围分配相同的空间 */
justify-content: space-evenly; /* 均匀排列每个元素每个元素之间的间隔相等 */
}

.fa-one-child1 {
height: 30px;
width: 30px;
background-color: #a6acde;
}

.fa-one-child2 {
height: 40px;
width: 40px;
background-color: #e4b9f0;
}

.fa-one-child3 {
height: 50px;
width: 50px;
background-color: #f3b009;
}

.fa-one-child4 {
height: 60px;
width: 60px;
background-color: #f77c4f;
}</pre></div>
<p>html</p>
<div class="jb51code"><pre class="brush:xhtml;">
<h3>垂直居中子元素左右分布</h3>
<div class="father-one has-flex">
<div class="fa-one-child1"></div>
<div class="fa-one-child2"></div>
<div class="fa-one-child3"></div>
<div class="fa-one-child4"></div>
</div>
</pre></div>
<p class="maodian"><a name="_lab2_1_5"></a></p><h3>水平垂直居中</h3>
<p>css</p>
<div class="jb51code"><pre class="brush:css;"> .father-two {
width: 100%;
height: 200px;
align-items: center; /*纵轴）方向上的对齐方式。*/
justify-content: center; /* 横轴）方向上的对齐方式*/
background-color: red;
}

.child {
width: 50%;
height: 60px;
background-color: rosybrown;
}</pre></div>
<p>html</p>
<div class="jb51code"><pre class="brush:xhtml;">
<h3>水平垂直居中</h3>
<div class="father-two has-flex">
<div class="child"></div>
</div>
</pre></div>
<p class="maodian"><a name="_lab2_1_6"></a></p><h3>水平垂直居中图标在上文字在下</h3>
<p>css</p>
<div class="jb51code"><pre class="brush:css;"> .father-three {
height: 80px;
background-color: #f77c4f;
align-items: center;
justify-content: center;
flex-direction: column;
}</pre></div>
<p>html</p>
<div class="jb51code"><pre class="brush:xhtml;">
<h3>水平垂直居中图标在上文字在下</h3>
<div class="has-flex father-three">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
<p>测试</p>
</div>
</pre></div>
<p class="maodian"><a name="_lab2_1_7"></a></p><h3>子元素平分父元素,且自适应等高</h3>
<p> css</p>
<div class="jb51code"><pre class="brush:css;"> .father-four {
background-color: #ffd5eb;
}

.fa-four-child {
flex: 1;
text-align: center;
background-color: #ffffff;
border: 1px solid;
}</pre></div>
<p>html</p>
<div class="jb51code"><pre class="brush:xhtml;">
<h3>子元素平分父元素,且自适应等高 </h3>
<div class="has-flex father-four">
<div class="fa-four-child">第一个</div>
<div class="fa-four-child">第二个</div>
<div class="fa-four-child">第三个</div>
<div class="fa-four-child" style="height: 90px">第四个</div>
</div>
</pre></div>
<p class="maodian"><a name="_lab2_1_8"></a></p><h3> 子元素平分父元素,两边对齐中间自适应相同宽度间隔，且自动换行</h3>
<p>css</p>
<div class="jb51code"><pre class="brush:css;"> .father-five {
height: 100px;
background-color: #a6acde;
justify-content: space-between;
flex-wrap: wrap;
}

.fa-five-child {
width: 21%;
background-color: #f77c4f;
}</pre></div>
<p>html</p>
<div class="jb51code"><pre class="brush:xhtml;">
<h3>子元素平分父元素,两边对齐中间自适应相同宽度间隔，且自动换行 </h3>
<div class="has-flex father-five">
<div class="fa-five-child">第一个</div>
<div class="fa-five-child">第二个</div>
<div class="fa-five-child">第三个</div>
<div class="fa-five-child">第四个</div>
<div class="fa-five-child">第五个</div>
<div class="fa-five-child">第六个</div>
<div class="fa-five-child">第七个</div>
<div class="fa-five-child">第八个</div>
</div>
</pre></div>
<p class="maodian"><a name="_lab2_1_9"></a></p><h3> 三栏布局,两边固定宽中间自适应</h3>
<p>css</p>
<div class="jb51code"><pre class="brush:css;"> .father-six {
height: 100px;
}

.one-child,
.three-child {
width: 300px;
background-color: #a6acde;
}

.two-child {
flex: 1;
background-color: #eeeeee;
}</pre></div>
<p>html</p>
<div class="jb51code"><pre class="brush:xhtml;">
<h3>三栏布局,两边固定宽中间自适应 </h3>
<div class="has-flex father-six">
<div class="fa-six-child one-child">第一个</div>
<div class="fa-six-child two-child">第二个</div>
<div class="fa-six-child three-child">第三个</div>
</div>

</pre></div>

頁: [1]

琼殿技术论坛's Archiver

flex(弹性布局)教程之常用布局