flex布局中的align-content属性

谁借莪１个温暖的怀抱￠ 2021-07-25 18:01 344阅读 0赞

**align-content属性起作用的条件:**

1.  对父元素设置自由盒属性display:flex;
2.  并且设置排列方式为横向排列flex-direction:row;
3.  设置换行，flex-wrap:wrap;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

1，align-content:stretch;

![20191030132236699.png][]

2， align-content:flex-start;

![20191030132300275.png][]

3，    align-content:flex-end;

![20191030132335494.png][]

4，    align-content:center;

![20191030132407996.png][]

5，    align-content:space-between;

![20191030132443460.png][]

6，    align-content:space-around;

![20191030132514138.png][]

参考：[https://www.jianshu.com/p/63c17bac0814][https_www.jianshu.com_p_63c17bac0814]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/63c979cc97cf4163a8809b3673e9e125.png
[20191030132236699.png]: /images/20210725/07f8b5165704493aa9a4946fa4e10300.png
[20191030132300275.png]: /images/20210725/5f5cdde8d172436fb9c148b746853fbf.png
[20191030132335494.png]: /images/20210725/18cc3c152bd245bebdddad249e37c059.png
[20191030132407996.png]: /images/20210725/af63b12845184e29bf55216641895c2a.png
[20191030132443460.png]: /images/20210725/e48202ca37774b73945307316664c2c2.png
[20191030132514138.png]: /images/20210725/9eeacf206e024d2fb4eb595747ed8bcd.png
[https_www.jianshu.com_p_63c17bac0814]: https://www.jianshu.com/p/63c17bac0814

发表评论取消回复

表情：

评论列表（有 0 条评论，344人围观）

还没有评论，来说两句吧...

相关阅读

相关弹性布局（Flex 布局）属性图解

1、主轴和交叉轴 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4u

小咪咪/ 2022年12月27日 02:22/ 0 赞/ 171 阅读

相关 css之flex属性布局

一、前言 Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。注意，设为Flex布局以后，子元素的float、clear和ve

r囧r小猫/ 2022年12月15日 03:57/ 0 赞/ 89 阅读

相关 CSS3属性----flex布局（Flex Box）

CSS3 弹性盒子(Flex Box) 1. 弹性盒子是 CSS3 的一种新的布局模式。 2. CSS3 弹性盒（ Flexible Box 或 flexbox），是

超、凢脫俗/ 2022年12月06日 12:59/ 0 赞/ 177 阅读

相关 flex布局的一些属性

Flex布局：flexible box的缩写，意思为弹性布局，因此flex布局就是弹性布局适用对象：行内元素和块级元素都可以使用flex布局设置了Flex的元素，它的所

亦凉/ 2022年10月25日 13:00/ 0 赞/ 170 阅读

相关 flex布局的属性

当父元素用flex布局时，它的子元素可以用flex-grow、flex-shrink、flex-basis属性设置，父元素在不同宽度下，子元素是如何分配父元素空间的 flex

左手的ㄟ右手/ 2022年10月11日 10:55/ 0 赞/ 132 阅读

相关 HTML中布局flex的标签,CSS3---Flex布局--项目属性

前言今天学习了项目的属性；【内容】项目属性： ①沿主轴方向上的排列顺序order: 0(默认值) | ②项目的收缩因子flex-shrink: 1(默认值) |

末蓝、/ 2022年10月10日 11:20/ 0 赞/ 201 阅读

相关记录Flex布局的属性

容器属性 flex-dirextion（主轴的方向）： >>row（水平） | row-reverse（水平取反） | column（垂直） | colu

傷城~/ 2022年10月03日 00:44/ 0 赞/ 99 阅读

相关 flex布局中的align-content属性

align-content属性起作用的条件: 1. 对父元素设置自由盒属性display:flex; 2. 并且设置排列方式为横向排列flex-direction:row

谁借莪１个温暖的怀抱￠/ 2021年07月25日 18:01/ 0 赞/ 345 阅读

相关常用的flexbox布局----flex属性

flex(flex items)属性这个属性定义在子元素中，是flex-grow、flex-shrink、flex-basis这三个属性的缩写。默认值为“0 1 aut

以你之姓@/ 2021年07月25日 14:27/ 0 赞/ 325 阅读

相关 flex弹性布局属性总结

弹性布局属性总结 display: flex; 弹性布局主轴： flex-direction:row/row-reverse;

阳光穿透心脏的1/2处/ 2021年07月25日 00:33/ 0 赞/ 392 阅读