Flex入门基础——Flex布局、容器container的属性

骑猪看日落 2022-07-15 09:47 346阅读 0赞

1、作用：

利用Flex可实现完美居中效果；

例（1）——display:flex;

（注意：无论父元素以何种比例递增，元素依旧保持水平居中）

.container{ width:200px; height:200px; background: cadetblue; border: 1px solid #ccc; display: flex; } .item{ width:50px; height: 50px; background: #eee; margin:auto; } <div class="container"> <div class="item"> item </div> </div>

2、Flex布局对子元素的影响

（1）修改了display:block

会对直接的子元素的display改成block；

对嵌套的子元素(孙子辈)，不产生影响。

（2）解决了margin重叠的问题

（3）干掉了float

.container{ display:flex; } .item{ ... } <div class="container"> <div class="item" style="float:left">1</div> <div class="item" style="float:right">2</div> </div>

上述代码中，style="float:left/right"由于display:flex;的作用而没有定义的必要。

3、Flex几个概念

（1）容器&项目

a、容器：若给元素设置了display:flex,即称这是一个容器；

b、项目：容器里边的直接子元素，成为项目。

（2）主轴&交叉轴

a、主轴：在容器当中，项目按一定的方向排列，默认是从左向右；

排列方向即为主轴的方向，在容器内部，主轴方向与容器交集的地方，就是主轴。

b、交叉轴：与主轴垂直的轴。默认的方向是从上向下。

4、容器\[container\]的属性值

（1）flex-direction

取值：row行排列(float:left——“1-2-3”)、

column列排列

row-reverse（类似于float:right——“3-2-1”）

column-reverse

默认情况下，由左向右，由上向下

功能：决定了主轴的方向。

（2）flex-wrap

取值：nowrap、wrap、wrap-reverse

（wrap-reverse表示换行方向颠倒，即从下向上的换行）

默认情况下，该属性表示换行，即在主轴方向上换行。

a、若默认水平方向(flex-direction:row)从左向右，换行方向：从上往下。

现象：1 2、3 4、5 6（三行两列）

b、若垂直方向（flex-direction：column）从上向下，

现象：1 2/3 4/5 6（三列两行）

功能：控制容器中项目的换行

（3）flex-flow

功能：简化代码。其实它是flex-direction与flex-wrap的合写。

flex-flow:flex-direction flex-wrap;

（4）jusity-content

取值：flex-start、flex-end、center、space-around、space-between

（默认值为flex-start）

space-around值表示容器很大，项目不足以填充整个容器，所以会有一部分空白部分，

此外，around表示环绕，让项目之间有联系。

space-between值表示容器与容器之间的距离相等。

功能：容器内的项目再按主轴方向排列，这个水性决定了项目和项目之间的位置关系，

在主轴方向上有富余的空间（项目的宽度小于容器的宽度），采用space-around/between

注意：主轴方向。

（5）align-items

取值：stretch、flex-start、flex-end、center、baseline

作用：项目在交叉轴（与主轴垂直的轴）方向上摆放的位置。

（6）align-content

取值：stretch、flex-start、flex-end、space-between、space-around

功能：a、当容器中有多行项目（当然，前提是允许换行）时，每一行项目就会产生一根主轴，多行项目就会产生多个主轴。

b、这个属性决定这多跟主轴之间的位置关系。

发表评论取消回复

表情：

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

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

相关阅读

相关 Flex布局基础

概念：什么是Flex？ FlexiableBox即是弹性盒子，用来进行弹性布局，可以配合rem处理尺寸的适配问题为什么使用Flex布局？ 1，用来为盒状模型提供

柔光的暖阳◎/ 2023年10月01日 09:13/ 0 赞/ 40 阅读

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

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

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

相关 flex布局的一些属性

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

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

相关 flex布局的属性

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

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

相关记录Flex布局的属性

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

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

相关 Flex入门基础——项目item的属性（order、flex-grow、flex-shrink、flex-basis、flex、align-self）

1、order 取值：数值功能：（1）容器中有多个项目，（2）项目的默认摆放时沿主轴（纵向）方向，即按文档中dom元素的书写顺序进行排列的；应用：or

比眉伴天荒/ 2022年07月15日 09:55/ 0 赞/ 312 阅读

相关 Flex入门基础——Flex布局、容器container的属性

1、作用：利用Flex可实现完美居中效果；例（1）——display:flex; （注意：无论父元素以何种比例递增，元素依旧保持水平居中） .contain

骑猪看日落/ 2022年07月15日 09:47/ 0 赞/ 347 阅读

相关 Flex 布局 - 入门

简介布局的传统解决方案，是基于盒状模型，依赖于 display、 position、float等。布局的传统解决方案对于那些特殊布局非常不方便，比如，垂直居中就不容易实

本是古典何须时尚/ 2022年05月28日 06:40/ 0 赞/ 202 阅读

相关快速入门Flex布局

参考文档： [Flex 布局教程：语法篇(阮一峰)][Flex] [Flex 布局教程：实例篇(阮一峰)][Flex 1] [在线flex布局样

淡淡的烟草味﹌/ 2022年03月16日 11:14/ 0 赞/ 330 阅读

相关弹性布局说明及flex容器属性

一、弹性布局说明： a) 给元素设置了display:flex;后，就成为了弹性盒或者弹性布局 b) 当父元素设置了flex后，子元素的float，clear和v

梦里梦外;/ 2022年02月23日 02:14/ 0 赞/ 314 阅读