Flex布局-基础篇

本文引自A Complete Guide to Flexbox

背景

The Flexbox Layout (Flexible Box) module (a W3C Candidate Recommendation as of October 2017) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).
Flex布局是W3C推荐的一种更有效的布局方式,即使他们的大小都是未知的或者动态的,都可以进行合理的布局

The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space or shrinks them to prevent overflow.
flex布局的主要思想是使容器能够更改其项目的宽度/高度(和顺序),以最好地填充可用空间(主要是适应各种显示设备和屏幕尺寸),Flex容器会扩展项目以填充可用的可用空间,或收缩它们以防止溢出。(这里的项目个人理解是容器中的对象,以DOM为例,那就是子标签了)

Note: Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.
Flexbox布局最适合应用程序的组件和小规模布局,而Grid布局则用于较大规模的布局

基础和术语

这块根据英语翻译过来的,我真是搞不懂,看来英语水平有限啊

  • flex container:parent element,也就是父级标签
  • flex items:child element,也就是子标签
  • main axis(主轴):flex items会沿着flex container的主轴进行布局,但是不一定是水平的,它依赖于flex-direction属性
  • main-start|main-end:flex items在flex container 中的起始到截止的位置
  • main-size:flex item的高度和宽度,是flex item的主大小
  • cross axis(翻译为横轴,但是不理解为啥叫横轴):垂直于主轴的叫横轴,他的方向依据与主轴的方向
  • cross-start|cross-end:Flex线填充有物品,并从Flex容器的交叉起点侧开始向交叉端侧放置。
  • cross-size:flex items的宽度或高度(以横截面尺寸中的较大者为准)为item的横截面尺寸。交叉尺寸属性是交叉尺寸中的“宽度”或“高度”中的任意一个。

属性讲解

flex container的属性

  1. display属性
    这个是定义一个flex container;行模式还是块模式依据与设定的值。它能够为直接的子标签设置flex 布局
    1
    2
    3
    4
    5
    <style>
    .container{
    display: flex;/*或者display: inline-flex;*/
    }
    </style>

  1. flex-direction

    1
    2
    3
    4
    .container {
    display: flex;
    flex-direction: row | row-reverse | column | column-reverse;
    }
    属性值 作用
    row(默认) 从左到右横向布局
    row-reverse 从右向左横向布局
    column 从上到下纵向布局
    column-reverse 从下到上纵向布局
  2. flex-wrap
    默认情况下,flex items会自动尝试在一行中布局,当然你可以通过是否允许换行来控制他

    1
    2
    3
    4
    .container{
    display: flex;
    flex-wrap: wrap|nowrap|wrap-reverse;
    }
    属性值 作用
    nowrap 不换行
    wrap 换行
    wrap-reverse 如果总共占两行,先排满二行,然后再排第一行
  1. flex-flow
    flex-flowflex-directionflex-wrap的缩写

    1
    2
    3
    4
    .container{
    display: flex;
    flex-flow: row wrap-reverse;
    }
  2. justify-content
    定义的是子标签在父标签中主轴上的对齐方式

    1
    2
    3
    4
    .container{
    display: flex;
    justify-content: start;
    }
    属性值 作用
    flex-start 主轴上向左对齐
    flex-end 主轴上右对齐
    center 主轴上居中
    space-between 两端对齐,项目之间的间隔相等
    space-around 每个子对象都间隔相等,项目之间的间隔比项目与父项目的间隔大一倍
  3. align-items属性
    定义子标签在交叉轴上的对齐方式

    1
    2
    3
    4
    5
    .container{
    display: flex;
    height: 500px;
    align-items: flex-start | flex-end | center | baseline | stretch;
    }
属性值 作用
flex-start 交叉轴起点对齐
flex-end 交叉轴的终点对齐
center 交叉轴的中点对齐
baseline 项目的第一行文字的基线对齐
stretch 如果flex item未设置高度或设置为auto,将沾满整个容器的高度
  1. align-content属性
    align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用
    1
    2
    3
    4
    5
    .box {
    display: flex;
    height: 500px;
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    }
    属性值 作用
    flex-start 和交叉轴的起点对齐
    flex-end 和交叉轴的终点对齐
    center 和交叉轴的中点对齐
    space-between 和交叉轴两端对齐,轴线之间的间隔平均分布
    space-around 每根轴线两侧的间隔都相等。所以轴线之间的间隔比轴线与边框的间隔大一倍
    stretch 轴线沾满整个交叉轴

flex items的属性

以下的6个属性是用在item上面的

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self
  1. order
    order 是定义item的排序顺序的,数值越小,排列越靠前,默认是0

    1
    2
    3
    .item {
    order:<integer>;
    }
  2. flex-grow
    flex-grow定义item的放大比例,默认是0,即如果存在剩余空间也不放大

    1
    2
    3
    .item{
    flex-grow:<number>
    }

    如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

  3. flex-shrink
    flex-shrink定义了item的缩小比例,默认为1,即如果空间不足时,该项目将被缩小

    1
    2
    3
    .item {
    flex-shrink: <number>; /* default 1 */
    }

    如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小,因为负值对该属性无效。

  4. flex-basis(这个属性没太弄懂)
    flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间。浏览器根据这个属性,计算主轴是否有多余空间。他默认是auto,即项目的本来大小。

    1
    2
    3
    .item{
    flex-basis:
    }

    它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。

  5. flex
    flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

    1
    2
    3
    .item {
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    }

    该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
    建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。

  6. align-self
    align-self属性允许单个item与其他item不一样的对其方式,可覆盖align-item属性。默认是auto,表示集成父元素的align-item属性,如果没有父元素,则等同于stretch

    1
    2
    3
    .item{
    align-self:auto|flex-start|flex-end|center|baseline|stretch
    }

实战

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<template>
<view style="width: 100%;background-color: #000000;padding: 20px;">
<view class="face box">
<view class="column">
<view class="point item"></view>
<view class="point item"></view>
</view>
<view class="column">
<view class="point item"></view>
<view class="point item"></view>
</view>
</view>
</view>
</template>

<script>
export default {
data() {
return {};
},
methods: {}
};
</script>

<style>
.face {
height: 120px;
width: 120px;
background-color: #ffffff;
border: 2px solid #c8c7cc;
border-radius: 20px;
padding: 5px;
}

.point {
height: 30px;
width: 30px;
background-color: #000000;
border: #8f8f94 2px solid;
border-radius: 17px;
margin: 3px;
}

.box {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}

.column{
display: flex;
flex-basis: 100%;
justify-content: space-between;
}

.item {

}
</style>