css flex 之 flex-grow | flex-direction

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

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

//html
<div class="container"><div class="item short">1</div><div class="item short">2</div><div class="item long">3</div><div class="item short">4</div>
</div>//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的高

css flex 之 flex-grow | flex-direction相关推荐

CSS布局—— float布局和flex布局
用什么CSS布局当需要兼容IE9时,使用float布局:当需要兼容IE9且不需要兼容最新浏览器时,使用flex布局:当不需要兼容IE9.需要兼容最新浏览器时,使用grid布局. float布局父元 ...
【Css\flex】css中关于弹性布局flex的综合用法（示例展示）
flex-shrink:0; 或width:0; flex-grow:0; 将子div自动伸缩取消 flex-grow;此属性为是否自动增长空间, flex-shrink;此属性为是否自动缩小空间 f ...
css专业名词,CSS进阶系列一（flex布局基础知识——介绍、规范、主要思想、专业术语）...
一.介绍 flex是flexible box的缩写,意为弹性布局.flexible box是CSS3新增加的,用来为盒模型提供最大的灵活性.flex旨在提供一个更加有效的方式来布置,对齐和分布在容器之 ...
CSS 属性篇(四)：Flex弹性盒子
一.Flex介绍 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局: .box{disp ...
CSS常用布局二（flex布局）
flex布局前言:flex是flexible box的缩写,译为"弹性布局",用来为盒模型提供最大的灵活性,任何一个容器都可以指定为flex布局,只需要设置"displ ...
JavaScript 5/30：Flex Panel Gallery即FLEX布局的图片库
JavaScript30 为Wes Bos推出的一项为期30天的挑战,旨在帮助人们用纯JavaScript来实现效果,初学者若想在JS方面快速精进,不妨一试.本题为第五题. 实现效果点击任意一张图片 ...
Flex框架（The Flex Framework）
Flex框架(The Flex Framework) Flex框架不同于Flex类库,它是一个集成在Flex应用里的ActionScript类库. Flex框架是完全写在ActionScript ...
在html5中flex布局详解,Flex布局详解（一）
在讲解Flex布局之前,我们首先可以回顾一下我们平时在做行向布局或者纵向布局时候我们页面的布局主要用到哪些布局方法或者思路. 1.normal flow (正常流,也叫文档流)--内联元素从左往右排列 ...
flex布局HTML实例,Flex常见布局实例
如果对flex不是很熟悉的同学,可以看一下我的另一篇文章Flex 布局 1.网格布局 1.1.基本网格布局最简单的网格布局,就是平均分布. HTML代码如下. 1/2 1/2 1/3 1/3 1/3 ...
弹性盒中 flex详解及flex：1的用法解析
弹性盒中 flex详解及flex:1的用法解析一.flex 在了解 flex:1 之前我们先了解一下flex的属性值有哪些,就如同background一样,有着backgournd-images.b ...

css flex 之 flex-grow | flex-direction

css flex 之 flex-grow | flex-direction相关推荐

最新文章

热门文章