Flex布局

1 Flex 布局

1.1 Flex 布局是什么?

Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

.box {
    display: flex;
}

行内元素也可以使用 Flex 布局。

.box {
  display: inline-flex;
}
  • flex: 将对象作为弹性伸缩盒显示,没有为⽗元素设置宽度,默认为100%。

  • inline-flex:将对象作为内联块级弹性伸缩盒显示,⽗元素默认会根据⼦元素的宽⾼去⾃适应。

注意:flex 布局的⼦元素不会脱离⽂档流,flex 布局不⽀持 IE9 及以下的版本;IE10及以上也只是部分⽀持。

<div class="flexbox">
    <div class="flexbox-item"></div>
    <div class="flexbox-item"></div>
    <div class="flexbox-item"></div>
    <div class="flexbox-item"></div>
    <div class="flexbox-item"></div>
</div>
.flexbox{
    display: flex;
    height: 200px;
    background: #ffff00
}

1.2 基本概念

采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size

1.3 容器的属性

以下6个属性设置在容器上。

  • flex-direction

  • flex-wrap

  • flex-flow

  • justify-content

  • align-items

  • align-content

1.3.1 flex-direction

flex-direction属性决定主轴的方向(即项目的排列方向)。

.box {
    flex-direction: row | row-reverse | column | column-reverse;
}

有4个值。

  • row(默认值):主轴为水平方向,起点在左端。

  • row-reverse:主轴为水平方向,起点在右端。

  • column:主轴为垂直方向,起点在上沿。

  • column-reverse:主轴为垂直方向,起点在下沿。

<div class="flexbox">
    <div class="flexbox-item">1</div>
    <div class="flexbox-item">2</div>
    <div class="flexbox-item">3</div>
    <div class="flexbox-item">4</div>
    <div class="flexbox-item">5</div>
    <div class="flexbox-item">6</div>
    <div class="flexbox-item">7</div>
    <div class="flexbox-item">8</div>
    <div class="flexbox-item">9</div>
    <div class="flexbox-item">10</div>
    <div class="flexbox-item">11</div>
    <div class="flexbox-item">12</div>
    <div class="flexbox-item">13</div>
    <div class="flexbox-item">14</div>
    <div class="flexbox-item">15</div>
</div>
.flexbox {
    display: flex;
    flex-direction: column;
    height: 400px;
    background: #ffff00
}
​
.flexbox-item {
    width: 50px;
    height: 50px;
    margin: 2px;
    background: #00ffff
}

1.3.2 flex-wrap

默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

.box{
    flex-wrap: nowrap | wrap | wrap-reverse;
}

可取三个值。

(1)nowrap(默认):不换行。

(2)wrap:换行,第一行在上方。

(3)wrap-reverse:换行,第一行在下方。

1.3.3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

.box {
    flex-flow: <flex-direction> || <flex-wrap>;
}

1.3.4 justify-content

justify-content属性定义了项目在主轴上的对齐方式。

.box {
   justify-content: flex-start | flex-end | center | space-between | space-around;
}

可取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

  • flex-start(默认值):左对齐

  • flex-end:右对齐

  • center: 居中

  • space-between:两端对齐,项目之间的间隔都相等

  • space-around:每个项目两侧的间隔相等,项目之间的间隔比项目与边框的间隔大一倍

  • space-evenly:每个项目两侧的间隔相等,项目之间间隔比项目与边框的间隔相等

1.3.5 align-items

align-items属性定义项目在交叉轴上如何对齐。

.box {
    align-items: flex-start | flex-end | center | baseline | stretch;
}

可取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。

  • flex-start:交叉轴的起点对齐。

  • flex-end:交叉轴的终点对齐。

  • center:交叉轴的中点对齐。

  • baseline:项目的第一行文字的基线对齐。

  • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

1.3.6 align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

.box {
   align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

该属性可能取6个值。

  • flex-start:与交叉轴的起点对齐。

  • flex-end:与交叉轴的终点对齐。

  • center:与交叉轴的中点对齐。

  • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。

  • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

  • space-evenly:元素间距离平均分配

  • stretch(默认值):轴线占满整个交叉轴。

1.4 弹性元素

放在容器盒⼦中的元素即为弹性元素。

  • float、clear和vertical-align属性将失效

  • 弹性元素均为块元素

  • 绝对定位的弹性元素不参与弹性布局

1.4.1 align-self

⽤于控制单个元素在交叉轴上的排列⽅式

align-items ⽤于控制容器中所有元素的排列,⽽ align-self ⽤于控制⼀个弹性元素的交叉轴排列, 能够覆盖容器的 align-items 属性。

.box-item {
    align-self: flex-start | flex-end | center | stretch;
}

可取4个值。

  • flex-start:交叉轴的起点对齐。

  • flex-end:交叉轴的终点对齐。

  • center:交叉轴的中点对齐。

  • stretch(默认值):将空间平均分配给元素。

<div class="flexbox">
	<div class="flexbox-item">1</div>
	<div class="flexbox-item">2</div>
	<div class="flexbox-item">3</div>
	<div class="flexbox-item">4</div>
	<div class="flexbox-item">5</div>
    <div class="flexbox-item">6</div>
	<div class="flexbox-item">7</div>
	<div class="flexbox-item">8</div>
	<div class="flexbox-item">9</div>
	<div class="flexbox-item">10</div>
    <div class="flexbox-item">11</div>
	<div class="flexbox-item">12</div>
	<div class="flexbox-item">13</div>
	<div class="flexbox-item">14</div>
	<div class="flexbox-item">15</div>
</div>
.flexbox {
    display: flex;
    flex-direction: row;
    height: 400px;
    background: #ffff00
}

.flexbox-item {
    width: 50px;
    height: 50px;
    margin: 2px;
    background: #00ffff
}

.flexbox-item:nth-child(1){
    align-self: flex-end
}

.flexbox-item:last-child{
    align-self: center
}

1.4.2 flex-grow

控制剩余空间是否放大,默认0,即如果存在剩余空间,也不放大。适合不确定文字数量自适应宽度。

/* 为三个DIV 弹性元素设置了1、3、6 ,即宽度分成10等份,第三个元素所占宽度为(宽度/(1+3+6)) X 6。 */
.box-item.item01 {
    flex-grow: 1;
}
.box-item.item02 {
    flex-grow: 3;
}
.box-item.item03 {
    flex-grow: 6;
}

注意:如果元素不是弹性盒对象的元素,则 flex-grow 属性不起作⽤。 如果弹性元素设置了宽度,将把(弹性盒⼦-弹性元素宽度和)后按照 flex-grow 进⾏分配 。

<div class="flexbox">
	<div class="flexbox-item"></div>
	<div class="flexbox-item"></div>
	<div class="flexbox-item"></div>
</div>
.flexbox {
    display: flex;
    width: 600px;
    height: 200px;
    background: #ffff00
}

.flexbox-item:nth-child(1){
    background: #00ffff;
    flex-grow: 1
}

.flexbox-item:nth-child(2){
    background: #ff00ff;
    flex-grow: 3
}

.flexbox-item:nth-child(3){
    background: #ff0000;
    flex-grow: 6
}

1.4.3 flex-shrink

控制空间不够的时候是否缩小,默认1,即如果空间不够则缩小,可以正常展示全该展示的东西,比如icon、图片等,如果设为0,则会出现超出截断的问题。

注意:如果元素不是弹性盒对象的元素,则 flex-shrink 属性不起作⽤。负值对该属性无效。

.flexbox {
    display: flex;
    flex-direction: row;
    height: 400px;
    background: #ffff00
}

.flexbox-item {
    width: 150px;
    height: 150px;
    margin: 2px;
    flex-shrink: 1;
    background: #00ffff
}

.flexbox-item:nth-child(1){
    flex-shrink: 0
}

.flexbox-item:last-child{
    flex-shrink: 3
}

1.4.4 flex-basis

定义了在分配多余空间之前,弹性元素占据的主轴空间(main size)。

浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即弹性元素的本来大小。

取值:

  • ⻓度单位

  • 百分⽐

flex-basis 的优先级⾼于 width、height 属性。 优先级 flex-basis 优先级⼤于 width、height。主轴⽅向。

弹性元素取值优先级高到低:

  • max-width、max-height、min-width、min-height

  • flex-basis

  • width、height

  • 内容本身的size

.flexbox {
    display: flex;
    flex-direction: row;
    height: 400px;
    background: #ffff00
}

.flexbox-item {
    width: 50px;
    height: 50px;
    margin: 2px;
    background: #00ffff
}

.flexbox-item:nth-child(1){
    flex-basis: 100px;
}

.flexbox-item:nth-child(2){
    flex-basis: 200px;
}

1.4.5 flex

flex 是 flex-grow、flex-shrink 、flex-basis 综合写法。

语法:

  • flex:flex-grow flex-shrink flex-basis;

  • flex:0 1 auto;(默认值)

  • 后两个属性可选

注意:

  • 一个值

    • 一个无单位的值会被认为 flex-grow 的值

    • 一个有效单位的宽度值,会被认为 flex-basis

  • 两个值

    • 第一个值必须是:无单位数,认为是 flex-grow

    • 第二个值必须是:一个无单位数:认为是 flex-shrink;一个有效单位宽度:认为是 flex-basis

  • 三个值

    • 第一个值必须是无单位数,认为是 flex-grow

    • 第二个值必须是无单位数,认为是 flex-shrink

    • 第三个值必须是有效单位宽度,认为是 flex-basis

1.4.6 order

⽤于控制弹性元素的排列顺序,默认为 order:0,数值越⼩,排列越靠前,可以负数或整数。

.item {
    order: 1;
}

1.4.7 圣杯布局

<div class="demo">
	<header class="header">头部</header>
	<section class="main">
		<aside class="left">left</aside>
		<section class="center">center</section>
		<aside class="right">right</aside>
	</section>
	<footer class="footer">底部</footer>
</div>

html,
body {
    height: 100%;
}
​
.demo {
    display: flex;
    height: 100%;
    flex-direction: column;
}
​
.main {
    display: flex;
    flex: 1;
}
​
.header,
.footer {
    height: 50px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #737070
}
​
.left,
.right {
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}
​
.center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #d1eccd;
}

1.4.8 双飞翼布局

* {
    margin: 0;
    padding: 0;
}
​
.container {
    height: 600px;
}
​
.main {
    background: red;
}
​
.sub {
    background: blue;
}
​
.extra {
    background: yellow;
}
​
.container {
    display: flex;
}
​
.main {
    flex-grow: 1;
}
​
.sub {
    flex: 0 0 150px;
    order: -1;
}
​
.extra {
    flex: 0 0 200px;
    order: 1;
}

<section class="container">
	<div class="main">中间栏,位于文档流的最前面</div>
	<div class="sub">sub 左边栏</div>
	<div class="extra">extra 右边栏</div>
</section>

1.4.9 弹性⽂本

⽂本节点也在弹性布局操作范围内

<div class="text">弹性文本,弹性文本,弹性文本,弹性文本,弹性文本,弹性文本,弹性文本,弹性文本,弹性文本,弹性文本,弹性文本,弹性文本,弹性文本,弹性文本,弹性文本,弹性文本,弹性文本,弹性文本,弹性文本,弹性文本,</div>

.text {
    display: flex;
    height: 100vh;
    align-items: center;
}

1.4.10 绝对定位

绝对定位的弹性元素不参与弹性布局。

.box {
    display: flex;
    height: 200px;
    position: relative;
}

.box-item {
    flex: 1;
    border: 1px solid #bbb
}

.box-item:last-child {
    background: #00ff00;
    position: absolute;
    width: 80px;
    height: 80px;
}

<div class="box">
    <div class="box-item"></div>
    <div class="box-item"></div>
    <div class="box-item"></div>
</div>

1.4.11 ⾃动空间

在弹性布局中对元素使⽤ margin-right:auto 等形式可以⾃动撑满空间。

下例为第⼀个ul设置 margin-right:auto 表示右侧空间⾃动撑满,第⼆个ul靠近⽗元素右边界。

* {
    margin: 0;
    padding: 0
}

ul {
    list-style: none
}

.container {
    width: 600px;
    margin: 0 auto;
}

nav {
    display: flex;
    align-items: center;
    border: solid 1px green;
    height: 60px;
    background: #f3f3f3;
}

ul:nth-child(1) {
    display: flex;
    align-items: center;
    margin-right: auto;
}

ul:nth-child(1)>li {
    margin: 0 10px;
}

ul:nth-child(2) {
    display: flex;
}

ul:nth-child(2)>li {
    display: flex;
    width: 50px;
    height: 50px;
    color: #fff;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    background: #9b59b6;
}

<div class="container">
	<nav>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</nav>
</div>
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值