Flex布局

2017-10-15 本文已影响85人 YM雨蒙

最近这两天一直在学习关于移动端页面,而移动端页面一般很多用flex(弹性)布局,方便简洁,而且没有什么兼容性的问题,我们来看一下关于flex

说起兼容性,我们先用can I Use 看看flex兼容性如何

弹性盒子，是一种布局方式，当页面需要适应不同的屏幕大小以及设备类型时，它依然能确保元素拥有更恰当的排布行为，弹性盒属于CSS 3部分，IE9以下不支持，现代浏览器指的就是IE9及以上的浏览器

大部分浏览器都是支持的

那什么是flex弹性布局呢?

MDN flex给出了这样的定义:弹性布局是指通过调整其内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间，或将其收缩来避免溢出。
块级布局更侧重于垂直方向、行内布局更侧重于水平方向，与此相对的，弹性盒子布局算法是方向无关的

在学习flex弹性布局之前,我们先看几个名词flex Terms

关于flex

flex container弹性容器:包含着弹性项目的父元素。
flex item弹性元素:弹性容器的每个子元素都称为弹性元素。
main axis主轴:弹性项目沿其依次排列的那根轴称为主轴(main axis)
cross axis辅轴:垂直于主轴的那根轴称为侧轴(cross axis)。

我们知道了flex弹性布局,如何在css中创建弹性容器

创建flex container
- display:flex :我们之前创建块级元素,行内元素,块级行内元素,都是用display来创建的,那我们的弹性布局就可以用display:flex

弹性元素flex item在flex弹性容器中的元素都是弹性元素

弹性容器在文档流中的子元素

<div style="display: flex">
    <div>block</div>    // 块级元素在文档流中,弹性元素
    <div style="float: left;">float</div>    // 浮动元素在文档流,弹性元素
    <span>inline</span>        // 行内元素在文档流,弹性元素
    <div style="position: absolute;">position</div>    // 定位元素脱离文档流,不是弹性元素
    <div>
        <div>grandson</div>    // 父级不是弹性容器,不是弹性元素
    </div>
</div>

我们看一下flex布局的特点:

方向
弹性
对齐

方向相关属性

flex-direction:row | row-reverse | column | column-reverse
- flex-direction 属性指定了内部元素是如何在flex 容器中布局的，定义了主轴的方向(正方向或反方向)
- row 默认值

不同属性值下面,元素在页面下的展示

/* css */
.container{display: flex;}
.container1{flex-direction: row-reverse;}
.container2{flex-direction: column}
.container3{flex-direction: column-reverse}
/* html */
<div class="container container0">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

默认值:row

flex-direction: row-reverse;

flex-direction: column

flex-direction: column-reverse

flex-wrap:nowrap | wrap | wrap-reverse
- flex-wrap 指定flex 元素单行显示还是多行显示。如果允许换行，这个属性允许你控制行的堆叠方向。
- nowrap : 默认值

/* css */
.container{display: flex;}
.container1{flex-wrap: wrap;}
.container2{flex-wrap: wrap-reverse;}

/* html */
<div class="container container0">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

flex-wrap: nowrap;默认值

flex-wrap: wrap;

flex-wrap: wrap-reverse;

flex-flow: <'flex-direction'> || <'flex-wrap'>
- flex-flow 属性是 flex-direction 和 flex-wrap 的简写。
- flex-flow: column-reverse wrap;
order : <integer>
- order 属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局。拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局。
- 初始值为0

/* css */
.container{display: flex;}
.item2{order: 1;}
.item1{order: 10;}
.item3{order: -1;}

/* html */
<div class="container">
  <div class="item item1">order:1</div>
  <div class="item item2">order:2</div>
  <div class="item item3">order:3</div>
</div>

order

弹性相关属性

flex-basis: content | width
- 设置flex item的初始宽高
- 初始值为auto设置或检索弹性盒伸缩基准值，如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间
- width 值可以是一个数字后面跟着绝对单位例如px, mm, pt; 该值也可以是一个百分数
- content :基于flex 的元素自动调整大小。

/* Specify <'width'> */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;

/* Intrinsic sizing keywords */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* Automatically size based on the flex item’s content */
flex-basis: content;

/* Global values */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;

flex-grow:<number>
- flex-grow 属性定义弹性盒子项（flex item）的拉伸因子。
- 默认值为0,不能取负值
- 如果没有显示定义该属性，是不会拥有分配剩余空间权利的

弹性布局元素宽度 = flex-basis + flex-grow / sum(flex-grow)*remain
                   基本宽度             占的比例          剩余空间

/* css */
.container{display: flex;}
.item{width: 100px;}
.item2{flex-basis: 300px;}
.item2{flex-grow: 1;}
.item3{flex-grow: 2;}
.item2, .item3{flex-basis: 0;}

/* html */
<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>

flex-grow

flex-shrink:<number>
- 指定了flex元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据flex-shrink 的值。
- 默认值为1,会平分压缩多出的空间,不允许负值

正常布局空间超出分配超出的负值空间
flex-basis + flex-shrink / sum(flex-shrink)*remain(负值)

/* css */
.container{display: flex;}
.item{flex-shrink: 0;}  //剩余空间没有弹性
.item2{flex-shrink: 2;}  //分到1/2剩余空间

/* html */
<div class="container">
  <div class="item item1">sets the flex shrink factor</div>
  <div class="item item2">sets the flex shrink factor</div>
  <div class="item item3">sets the flex shrink factor</div>
</div>

flex-shrink:1默认值为1平分

flex:none | <'flex-grow'> || <'flex-shrink'> || <'flex-basis'>
- 初始值:0 1 auto,单个初始值
- 简写

/* Basic values */
flex: auto;  // 相当于将属性设置为 flex: 1 1 auto
flex: initial;  // 相当于将属性设置为 flex: 0 1 auto
flex: none;  // 相当于将属性设置为 flex: 0 0 auto
flex: 2;

/* One value, unitless number: flex-grow */
flex: 2;

/* One value, width/height: flex-basis */
flex: 10em;
flex: 30px;

/* Two values: flex-grow | flex-basis */
flex: 1 30px;

/* Two values: flex-grow | flex-shrink */
flex: 2 2;

/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/* Global values */
flex: inherit;
flex: initial;
flex: unset;

语法可参考:flex属性

对齐相关属性

justify-content: flex-start | flex-end | end | space-between | space-around
- 设置主轴(main-axis)上的对齐方式
- flex-start默认值

值	描述
`flex-start`	`从行首开始排列，每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐`
`flex-end`	`从行尾开始排列，每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐`
`center`	`伸缩元素向每行中点排列，每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同`
`space-between`	`在每行上均匀分配弹性元素，相邻元素间距离相同，即空白在子项之间每行第一个元素与行首对齐，每行最后一个元素与行尾对齐`
`space-around`	`在每行上均匀分配弹性元素，相邻元素间距离相同，即空白围绕着子项每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半`

/* css */
.container{display: flex;}
.fs{justify-content: flex-start;}
.fe{justify-content: flex-end;}
.c{justify-content: center;}
.sb{justify-content: space-between;}
.sa{justify-content: space-around;}

/* html */ 更换类名看到不同的效果
<div class="container fs">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>

justify-content

align-items:flex-start | flex-end | end | baseline | stretch
- 与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐。

值	描述
`flex-start`	`元素紧靠 cross 轴起始边界`
`flex-end`	`元素紧靠 cross 轴结束边界`
`center`	`元素在 cross 轴居中，如果元素在 cross 轴上的高度高于其容器，那么在两个方向上溢出距离相同`
`baseline`	`所有元素向基线对齐， cross 轴起点到元素基线距离最大的元素将会于 cross 轴起点对齐以确定基线`
`stretch`	`弹性元素被在 cross 轴方向被拉伸到与容器相同的高度或宽度`

/* css */ 设置在父容器上
.container{display: flex;}
.item1{line-height: 100px;}
.item2{line-height: 70px;}
.fs{align-items: flex-start;}
.fe{align-items: flex-end;}
.c{align-items: center;}
.s{align-items: stretch;}  //拉伸充满父容器
.b{align-items: baseline;}

/* html */ 更换类名看到不同的效果
<div class="container fs">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>

align-items

align-self:auto | flex-start | flex-end | center | baseline | stretch
- 设置单个flex-item在cross-axis上的对齐方式
- 对齐当前flex 行中的 flex 元素，并覆盖 align-items
  的值. 如果任何flex元素的侧轴方向 margin 值设置为 auto，则会忽略align-self。

值	描述
`auto`	`默认值，元素继承了它的父容器的 align-items 属性，如果没有父容器，则值为 "stretch"`
`flex-start`	`元素位于该行的 cross 轴的起始边界`
`flex-end`	`元素位于该行的 cross 轴的结束边界`
`center`	`flex 元素会对齐到 cross-axis 的中间，如果该元素的 cross-size 的尺寸大于 flex 容器，将在两个方向均等溢出`
`baseline`	`如果弹性盒元素的行内轴与 cross 轴为同一条，则该值与 "flex-start" 等效,其它情况下，该值将参与基线对齐`
`stretch`	`元素被拉伸到与容器相同的高度或宽度`

设置在子弹性元素上的对齐方式

align-content:flex-start | flex-end | center | space-between | space-around | stretch
- 浏览器如何在容器的侧轴围绕弹性盒子项目分配空间。
- 初始值stretch

/* css */ 设置在父容器上
.container{display: flex;}
.container{height: 800px;flex-flow: row wrap;align-items: flex-start;}

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

/* html */ 
<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="item item9">9</div>
  <div class="item item10">10</div>
</div>

align-content

参考MDN flex

如何用刚学的flex布局做一个三行两列自适应布局呢?

html, body{height: 100%;}
body{display: flex;flex-flow: column;}
.head, .foot{height: 100px;}
.body{flex: 1;display: flex;}
.side{width: 200px;}
.main{flex: 1;}
.main{margin-left: 10px;}
.body{width: 960px;align-self: center;}

<div class="head">head</div>
<div class="body">
    <div class="side">side</div>
    <div class="main">main</div>
</div>
<div class="foot">foot</div>

自适应布局

参考了MDN,如有不对,请帮忙指出

Flex布局

方向相关属性

弹性相关属性

对齐相关属性

猜你喜欢

热点阅读