糯麦 NurMai

400-158-5662

糯麦科技

/

新闻资讯

/

技术讨论

/

学习CSS中_flex布局的属性

学习CSS中_flex布局的属性

原创 新闻资讯

于 2023-09-21 10:40:56 发布

16162 浏览

一、设置在容器上的属性


1.flex-direction属性

flex-direction属性决定主轴的方向

.box {
  flex-direction: row | row-reverse | column | column-reverse;}


1.1 row(默认值):主轴为水平方向,起点在左端。

1.png


1.2 row-reverse:主轴为水平方向,起点在右端。

2.png


1.3 column:主轴为垂直方向,起点在上。

3.png


1.4 column-reverse:主轴为垂直方向,起点在下。

4.png


2.flex-wrap属性

flex-wrap属性决定如何换行

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;}


2.1 nowrap(默认值):不换行

5.png


2.2 wrap:换行,第一行在上

6.png


2.3 wrap-reverse:反向换行,即第一行在下方

7.png


3.flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

.box {
  flex-flow: <flex-direction> <flex-wrap>;}


4 .justify-content属性

justify-content属性决定如何分配主轴上的空白空间

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly}


4.1 flex-start(默认值):左对齐

8.png

4.2 flex-end:右对齐

9.png


4.3 center:居中


4.4 space-between:空白均匀分布到元素之间

10.png


4.5 space-around:空白分不到元素两侧,所以元素之间的间隔比元素与边框的间隔大一倍。

11.png


4.6 space-evenly:空白分布到元素的单侧,每段空白都相等 (兼容性较差,一般不用)

12.png


5.align-content属性

align-content属性决定侧轴上空白空间的分布。在多行的情况下使用。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;}


5.1 stretch(默认值):自动调整,使每行侧轴相等。

13.png


5.2 flex-start:下一行的侧轴贴着上一行侧轴。

14.png


5.3 flex-end:跟flex-start相反。

15.png


5.4 center:侧轴在容器中间对齐。

16.png


5.5 space-between:两端对齐,轴线之间的间隔平均分布。

17.png


5.6 space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

18.png


6.align-items属性

align-items属性定义项目在侧上如何对齐。在子项为单项/单行的时候使用。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;}


6.1 stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

19.png


如果容器内有很多高度不同的项目,且容器也没有设置高度或者高度与最高者相等,那么最高的那一个项目会撑满容器。


20.png


6.2 flex-start:侧轴的起点对齐。

21.png


6.3 flex-end:侧轴的终点对齐。

22.png


6.4 center:侧轴的中点对齐。

23.png


6.5 baseline: 第一行文字的基线对齐。

24.png


二、设置在容器内的项目上的属性

1.flex-grow属性

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。


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


负值无效

25.png


2.flex-shrink属性

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。


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


负值无效

26.png


3.flex-basis属性

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。


4.flex属性

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


auto (1 1 auto) 和 none (0 0 auto)。


建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。


5.order属性

order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。


6.align-self属性

align-self用来覆盖当前弹性元素上的align-items,对单个子项目生效。

CSS

web

网站制作

小程序开发

阅读排行

  • 1. 几行代码就能实现Html大转盘抽奖

    大转盘抽奖是网络互动营销的一种常见形式,其通过简单易懂的界面设计,让用户在游戏中体验到乐趣,同时也能增加商家与用户之间的互动。本文将详细介绍如何使用HTML,CSS和JavaScript来实现大转盘抽奖的功能。

    查看详情
  • 2. 浙江省同区域公司地址变更详细流程

    提前准备好所有需要的资料,包含:房屋租赁合同、房产证、营业执照正副本、代理人身份证正反面、承诺书(由于我们公司其中一区域已有注册另外一公司,所以必须需要承诺书)

    查看详情
  • 3. 微信支付商户申请接入流程

    微信支付,是微信向有出售物品/提供服务需求的商家提供推广销售、支付收款、经营分析的整套解决方案,包括多种支付方式,如JSAPI支付、小程序支付、APP支付H5支付等支付方式接入。

    查看详情
  • 4. 阿里云域名ICP网络备案流程

    根据《互联网信息服务管理办法》以及《非经营性互联网信息服务备案管理办法》,国家对非经营性互联网信息服务实行备案制度,对经营性互联网信息服务实行许可制度。

    查看详情
  • 5. 微信小程序申请注册流程

    微信小程序注册流程与微信公众号较为相似,同时微信小程序支持通过已认证的微信公众号进行注册申请,无需进行单独认证即可使用,同一个已认证微信公众号可同时绑定注册多个小程序。

    查看详情