Menu

CSS重点知识总结—flex布局

1.理解flex

Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。可以随着页面大小的改变自适应页面布局。

块级元素 .box{ display:flex; } 行内元素也可以设置成flex布局 .box{ display:inline-flex; }

设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

2.justify-content 和 align-items

justify-content 是弹性盒子主轴布局方式,分为靠左,靠右,居中分布,均匀分布等

align-items 是侧轴中的布局,同上

3.flex-grow、flex-shrink、flex-basis及其简写

  1. flex-basis  ,basis英文意思是<主要成分>,所以他和width放在一起时,肯定把width干掉,basis遇到width时就会说我才是最主要的成分,你是次要成分,所以见到我的时候你要靠边站。
  2. flex-grow,grow英文意思是<扩大,扩展,增加>,这就代表当父元素的宽度大于子元素宽度之和时,并且父元素有剩余,这时,flex-grow就会说我要成长,我要长大,怎么样才能成长呢,当然是分享父元素的空间了。
  3. flex-shrink, shrink英文意思是<收缩>,这就代表当父元素的宽度小于子元素宽度之和时,并且超出了父元素的宽度,这时,flex-shrink就会说外面的世界太苦了,我还是回到父亲的怀抱中去吧!因此,flex-shrink就会按照一定的比例进行收缩。

这三个属性可以使用flex:[grow] [shrink] [basis]进行缩写。如下:

  1. flex:none 等同于 flex:0 0 auto 等同于flex-grow: 0;flex-shrink: 0;flex-basis: auto;
  2. flex:auto 等同于flex:1 1 auto
  3. flex: 1 等同于 flex:1 1 0%
  4. flex: 2 等同于 flex:2 1 0%
  5. flex: 10%  等同于 flex:1 1 10%
  6. flex: 2 3 等同于 flex:2 3 0%,等同于 flex-grow: 2; flex-shrink: 3; flex-basis: 0%;
  7. flex: 2 100px 等同于flex:2 1 100px

4.左右定宽,中间自适应

思路:中间 flex = 1, 宽用百分比,左右固定宽,父元素 display:flex。

<div class="container">
    <div class="left"></div>
    <div class="mid"></div>
    <div class="right"></div>
</div>
.container {
	display:flex;
}
.mid{
	flex:1;
	width:100%;
	height: 100px;
	background: royalblue;
}
.left{
	width:100px;
	height: 100px;
	background: rosybrown;
}
.right{
	width:100px;
	height: 100px;
	background: cadetblue;
}

5.等分布局(不知道几等分情况)

思路:父元素 display:flex,子元素 flex:1

<div class="container">
    <div class="left"></div>
    <div class="mid"></div>
    <div class="right"></div>
</div>
.container {
	display: flex;
}
.mid{
	flex:1;
	height: 100px;
	background: royalblue;
}
.left{
	flex:1;
	height: 100px;
	background: rosybrown;
}
.right{
	flex:1;
	height: 100px;
	background: cadetblue;
}

6.三个小盒子在一个大盒子垂直居中排列

思路:在父 dom 里使用 display: flex 和 align-items: center

<div class="box">
	<span class="left"></span>
	<span class="mid"></span>
	<span class="right"></span>
</div>
.box {
	height: 300px;
	width: 300px;
	display: flex;
	background: red;
	align-items: center;
}
.left{
	background: yellow;
	height: 100px;
	width: 50px;
}
.mid{
	background: rebeccapurple;
	height: 200px;
	width: 50px;
}
.right{
	background: green;
	height: 70px;
	width: 50px;
}

7.三个小盒子在一个大盒子垂直排列,水平居中

思路:与上题大致相同,需要父元素加一个 flex-direction: column

.box {
	height: 300px;
	width: 300px;
	display: flex;
	background: red;
	align-items: center;
	flex-direction: column;
}
.left{
	background: yellow;
	height: 80px;
	width: 150px;
}
.mid{
	background: rebeccapurple;
	height: 20px;
	width: 100px;
}
.right{
	background: green;
	height: 70px;
	width: 150px;
}

8.一个小盒子在一个大盒子里居中

思路:父元素flex布局,水平居中align-items:center,垂直居中:justify-content:center

<div class="box">
	<span class="mid"></span>
</div>
.box {
	height: 300px;
	width: 300px;
	display: flex;
	background: red;
	align-items: center;
	justify-content: center;
}

9.左右布局,一侧定宽,一侧自适应撑满

思路:父元素display:flex,子元素一侧固定宽度,一侧百分百。

<div class="main">
	<div class="left">固定宽度300px</div>
	<div class="right">自适应宽度</div>
</div>
.main {
	display: flex;
	height: 100%;
}
.left,
.right {
	height: 100%;
	border: 1px solid red;
	box-sizing: border-box;
}
.left {
	width: 300px;
}
.right {
	width: 100%;
}

10.水平布局,多个盒子(不定),盒子比例16:9,间隔10px,左右贴边,响应式

思路:padding-bottom 的值是百分比形式时,百分比的基数是其所在元素的父元素的宽度而不是高度(同 padding-leftpadding-right 一样)。子元素先均分,然后子元素再套一层子元素,高度为0,padding-bottom值为宽度的9/16。

难点:这道题难点在于盒子数量是不固定的。若盒子固定,则可以利用vw或vh单位来处理。而padding-bottom的内边距百分比特性又是比较偏的一个用法,容易被人忽略。

<div class="box">
	<div class="item">
		<div class="cont"></div>
	</div>
	<div class="item">
		<div class="cont"></div>
	</div>
	<div class="item">
		<div class="cont"></div>
	</div>
	<div class="item">
		<div class="cont"></div>
	</div>
	<div class="item">
		<div class="cont"></div>
	</div>
	<div class="item">
		<div class="cont"></div>
	</div>
</div>
.box {
        width: 100%;
        display: flex;
}
.box .item {
	flex: 1;
	margin-right: 10px;
}
.box .item>.cont{
	width: 100%;
	height: 0;
	padding-bottom: calc(100% / 16 * 9);
	background-color: #03A9F4;
}
.box .item:last-child {
	margin-right: 0;
}

本文固定连接:https://code.zuifengyun.com/2019/12/1688.html,转载须征得作者授权。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

¥ 打赏支持