css flex 之 flex-grow | flex-direction

xavier 发布于2019-08-29 13:15 / 612人阅读

摘要：是的一个特性，通过它可以让在某一个区域内的多个元素灵活的布局，对移动端的布局特别有用。跟相关的属性不止一个，而是很多个，而且有些还很复杂。只接受数字的值，且不接受负数。它用在想被布局的元素上面，它表示子元素被分配到的空间，准确地说是比例。

flex是CSS的一个特性，通过它可以让在某一个区域内的多个元素灵活的布局，对移动端的布局特别有用。
跟flex相关的css属性不止一个，而是很多个，而且有些还很复杂。所以，我们就一个一个的来。

1: display: flex
要运用flex属性，首先得在你想让其子元素布局的container上面运用这个属性。
2: flex-grow: 1| 2|...Number
flex-grow只接受数字的值，且不接受负数。它用在想被布局的元素上面，它表示子元素被分配到的空间，准确地说是比例。来看一段代码。

//html

    1
    2
    3
    4


//css
.container {
    display: flex;
}

.item {
    flex-grow: 2;
    background: yellow;
    border: 1px solid;
}
.short {
    flex-grow: 1;
    background: pink;
}

效果：

在以上的例子中，我们总共有4个div，其中三个的flex-grow为1，有一个的flex-grow为2.其实我们整个container的宽就被平均分为了的5份，其中第三个div占了2/5，其余三个占了1/5.

3: flex-direction
flex-direction从名字上就能知道，它是跟方向有关的属性。它用在container上面，决定它的子元素按照什么方向来排列，它接受4个值：

1: row
2: row-reverse
3: column
4: column-reverse

第一个例子里面，我们是没有给container加flex-direction这个属性的，因为它的默认值是’row‘.接下来我们就给container依次运用这四个值，来直观地感受一下它们的区别：
1: row

.container {
    display: flex;
    flex-direction: row;
}

结果：子元素按照在HTML里面出现的顺序，在水平方向上依次排列

2: row-reverse

.container {
    display: flex;
    flex-direction: row-reverse;
}

结果：子元素按照在html里面出现的顺序反过来，水平方向上排列

3: column

.container {
    display: flex;
    flex-direction: column;
    height: 200px;
}

效果：子元素根据在HTML里面出现的顺序，垂直地排列，按照flex-grow的值，分割container的高

4: column-reverse

.container {
    display: flex;
    flex-direction: column-reverse;
    height: 200px;
}

效果：子元素根据在HTML里面出现的顺序反过来，垂直地排列，按照flex-grow的值，分割container的高

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112472.html

Flex入坑指南

摘要：我们给容器设置了宽度为为了方便的减去计算。这个属性用来设置元素在容器中所占据的宽度默认主轴方向，这个属性主要是用来让来计算容器是否还有剩余面积的。弹性布局flex是一个几年前的CSS属性了，说它解放了一部分生产力不为过。至少解放了不少CSS布局相关的面试题 :) 之前网上流行的各种XX布局，什么postion: absolute+margin，float+padding，各种都可以...

imccl 2019-08-29 15:35 评论0 收藏0
Flex入坑指南

摘要：我们给容器设置了宽度为为了方便的减去计算。这个属性用来设置元素在容器中所占据的宽度默认主轴方向，这个属性主要是用来让来计算容器是否还有剩余面积的。弹性布局flex是一个几年前的CSS属性了，说它解放了一部分生产力不为过。至少解放了不少CSS布局相关的面试题 :) 之前网上流行的各种XX布局，什么postion: absolute+margin，float+padding，各种都可以使用fle...

番茄西红柿 2019-04-23 13:40 评论0 收藏0
「译」Flexbox 基本原理

摘要：对这两个值添加，则主轴将反转，而交叉轴保持不变。顺序是以组为单位进行分配的。默认情况下所有的弹性项目都设置为，这意味着所有的项目位于同一组，并且它们会按照原始顺序进行定位。这是通过文件完成的，它负责跟踪依赖项及其版本。原文地址：Flexbox Fundamentals 原文作者：Marina-ferreira showImg(https://segmentfault.com/...

Forest10 2019-08-30 11:06 评论0 收藏0
JavaScript五十问——对比来说CSS的Grid与FlexBox（上篇）

摘要：前言春节假期有幸拜读了张鑫旭大大的关于与的两篇文章见参考文献，很有收获自己在开发的过程中，很多时候都会采用布局，而与这种方式已经很少使用了这次在春假期间学习了，深感的好用与便利。相对于，它多出来一个的属性，代表拉伸默认属性。前言春节假期有幸拜读了张鑫旭大大的关于Flex与Grid的两篇文章（见参考文献），很有收获；自己在开发的过程中，很多时候都会采用Flex布局，而Float与in...

xuhong 2019-08-30 15:55 评论0 收藏0
10分钟理解CSS3 FlexBox

摘要：顾名思义，意味着增长，用于控制的尺寸的伸展。与相对的是，用于控制子元素尺寸超过后，对子元素的压缩。压缩后的的宽度分别为，所以相比于初始宽度被压缩掉的宽度分别为，，与的值成反比。基本介绍特点 flexbox是一种css display类型，提供一种更简单高效的布局方式； flexbox可以对元素相对于父元素、兄弟元素进行定位、控制尺寸、控制间距； flexbox对响应式有很好的支持...

dongxiawu 2019-08-02 12:14 评论0 收藏0