flex是用于flex布局中项目的的属性; 它是一种简写形式;(这篇文章中使用display:flex
的元素称为容器, 容器内的元素称为项目)
它是flex-grow
,flex-basis
,flex-shrink
的简写
css语法
flex: flex-grow felx-shrink flex basis | auto | initial | inherit
所以在了解flex的使用前,我们需要回顾一下flex-grow
,flex-basis
,flex-shrink
; 他们的使用, 如果你对这些有了解并知道他们的使用,请看 第二部分
flex-grow
属性定义项目的放大比例, 默认为0, 即如果存在剩余空间也不放大,
如果所有项目都是flex-grow
属性都为1,则他们将均等分剩余空间(如果有的话)
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">
<title>Documenttitle>
<style>
.box1, .box2 {
height: 300px;
display: flex;
background-color: lavender;
align-items: center; /*从轴居中*/
}
.box1 div, .box2 div {
width: 100px;
height: 100px;
}
.box1 div{
flex-grow: 1;
}
section div:first-child {
background-color: #4CAF50;
}
section div:nth-child(2) {
background-color: #535bf2;
}
section div:nth-child(3) {
background-color: #2c3e50;
}
style>
head>
<body>
<h3>实验组:h3>
<section class="box1">
<div class="b1c1">b1c1div>
<div class="b1c2">b1c2div>
<div class="b1c3">b1c3div>
section>
<br>
<br>
<h3>对照组:h3>
<section class="box2">
<div class="b2c1">b2c1div>
<div class="b2c2">b2c2div>
<div class="b2c3">b2c3div>
section>
body>
html>
flex-shrink
属性定义了项目的缩小比例,默认为1, 即如果空间不足,该项目则缩小,
如果所有项目的flex-shrink
属性都为1,当剩余空间不足时,都将等比例缩小
.box1 div{ /实验组中的div*/
flex-grow: 1;
flex-shrink:0;
}
flex-basis
属性定义了在分配多余空间之前,该项目占据主轴的空间
浏览器根据这个属性,计算主轴是否有多余空间,它的默认值为auto,即项目本来大小
它可以给一个大小值(比如200px), 则项目初始将占据该大小的空间, 实际占据空间还是需要根据项目中是否使用了flex-shrink
和flex-grow
属性
.b1c1{
flex-basis: 200px;
}
设个时候如果给该项目使用flex-grow
或flex-shrink
属性仍然是有效的;
.box1 div{
flex-grow: 1;
}
.b1c1{
flex-basis: 200px;
}
但要注意的是flex-shrink
缩小的时候是按照项目所占空间等比例进行缩小,
上部分说到flex属性,是一个简写属性;它是对flex grow , flex-shrink , flex-basis
属性的简写,
css语法:
flex: flex grow flex-shrink flex-basis | auto | initial | inherit
下面是这些值的一些描述;
值 | 描述 |
---|---|
flex-grow | 一个数字,规定项目将相对于其他灵活的项目进行扩展的量 |
flex-shrink | 一个数字,规定项目将相对于其灵活的项目进行缩小的量 |
flex-basis | 项目的长度,合法值:‘auto’,'inherit’或后面跟"%",“px”,"em"或任何其他长度单位的数字 |
auto | 与 1 1 auto 相同 |
none | 与 0 0 auto 相同 |
initial | 设置该属性位默认值 即 0 1 auto |
inherit | 从父元素继承该属性 |
flex: initial
等同于设置 flex: 0 1 auto
是 flex属性的默认值
适用场景
initial
表示CSS属性的初始值, 通常用来还原已经设置的CSS属性,一般父节点设置display:flex
,子节点不设置属性则css默认默认表现为flex:initial
上图所示的布局效果常见于按钮,标题,小图标等小组件的排版布局
flex:0
等同于设置flex:0 1 0
flex: auto
等同于设置 flex: 0 0 auto
.box1 div{ /*实验组*/
flex: 0;
}
.box1 div{ /*实验组*/
flex: none;
}
flex:1
等同于设置 flex:1 1 0
flex:auto
等同于设置flex: 1 1 auto
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">
<title>Documenttitle>
<style>
.box1, .box2 {
width: 300px;
height: 300px;
display: flex;
background-color: lavender;
align-items: center; /*从轴居中*/
}
.box1 div, .box2 div {
width: 100px;
height: 100px;
}
.b1c1{
flex: auto;
}
.b1c2{
flex:1;
}
section div:first-child {
background-color: #4CAF50;
}
section div:nth-child(2) {
background-color: #535bf2;
}
section div:nth-child(3) {
background-color: #2c3e50;
}
style>
head>
<body>
<h3>实验组:h3>
<section class="box1">
<div class="b1c1">b1c1 使用flex:autodiv>
<div class="b1c2">b1c2 使用flex:1div>
<div class="b1c3">b1c3div>
section>
<br>
<br>
<h3>对照组:h3>
<section class="box2">
<div class="b2c1">b2c1div>
<div class="b2c2">b2c2div>
<div class="b2c3">b2c3div>
section>
body>
html>
.box1, .box2 {
width: 500px;
height: 300px;
display: flex;
background-color: lavender;
align-items: center; /*从轴居中*/
}
上面两图体现了flex:1
和flex:auto
的区别,虽然都是充分分配容器的尺寸,但是flex:1
的尺寸表现得更加内敛(他会优先牺牲自己的宽度),flex:auto
的尺寸表现更为霸道(优先扩展自己的尺寸)
适用flex:1
的场景
当希望元素充分利用剩余空间,同时不会侵占其他元素应有的宽度的时候,适合使用flex:1
,
这样的场景在Flex布局中非常的多
例如所有的等分列表,或者等比例列表都适合使用flex:1
或者其他的flex数值,
适用flex:auto
的场景
当希望元素充分利用剩余空间,但是各子的尺寸按照各子内容进行分配的时候,适合使用flex:auto
例如导航菜单,整体设置为200px,内部设置flex:auto,会自动按照内容比例进行分配宽度
最后总结一下:
flex:initial
表示默认的状态,无需设置,适合小控件元素的分布布局,或者某一项内容动态变化的布局
flex:0
适用场景较少
flex:none
适用于不换行内容固定或者较少的小控件元素上,如按钮
flex:1
适合等分布局
flex:auto
适合基于内容动态适配的布局