flex布局总结

最新推荐文章于 2023-09-20 23:43:24 发布
转载 最新推荐文章于 2023-09-20 23:43:24 发布 · 76 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://my.oschina.net/u/2436852/blog/3015322
文章标签：

#python

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

flex布局总结

 

 

13ad0978446dd40dbc3cf9ef7bfe2262529.jpg

flex 布局

类型
  •  display: flex;(本文章为此为主)
  •  display；inline-flex;

 

属性
  • 父节点 容器flex-container
  • 子节点 flex-item

 

父节点容器
  1. flex-direction          主轴方向(一般水平方向)
  2. flex-warp                 处理一行排列不足的问题
  3. flex-flow                  1和2的简写（flex-flow: row nowrap）
  4. justify-content        主轴(水平方向)对齐方式
  5. align-items              与主轴的交叉轴（竖方向）对齐方式
  6. align-content          多行在交叉轴轴上的对齐方式

 

子节点项目
  1. order                            值是整数，默认为0，整数越小，item排列越靠前
  2. flex-grow                      是其他item的放大倍数
  3. flex-shrink                    但空间不足，按照比例被消化, 需在父节点容器中设置flex-basis宽度
  4. flex-basis                      规定item项目的宽度
  5. flex                               是flex-grow flex-shrink flex-basis的总和
  6. align-self                      允许item自己在交叉轴(竖方向)有对齐方式

 

父节点容器

 

  1. flex-direction          主轴方向(一般水平方向)
  2. flex-warp                 处理一行排列不足的问题
  3. flex-flow                  1和2的简写（flex-flow: row nowrap）
  4. justify-content        主轴(水平方向)对齐方式
  5. align-items              与主轴的交叉轴（竖方向）对齐方式
  6. align-content          多行在交叉轴轴上的对齐方式

 

html案例代码：

 

<div class="flex-container">
    <div class="flex-item red">
      1
    </div>
    <div class="flex-item green">
      2
    </div>
    <div class="flex-item yellow">
      3
    </div>
    <div class="flex-item black">
      4
    </div>
  </div>

css案例代码：

 

html,body{
    background: #f7f7f7;
  }
  .flex-container{
    display: flex
    color: #fff;
  }
  .flex-item{
    width: 150px;
    height: 100px;
  }
  .red{
    background: red;
  }
  .green{
    background: green;
  }
  .yellow{
    background: yellow;
  }
  .black{
    background: black;
  }

 

页面如下：

 

1551022534092-e5ae2a91-ede4-47ee-a9a4-c59aed92f586.png

 
 
 
flex-direction 

决定主轴(一般是x轴)的方向，即项目排列的方向，有四个可能的值：row(默认)| row-reverse | column | column-reverse 

 

  • row: 主轴为水平方向，项目沿主轴从左至右排列
  • column：主轴为竖直方向，项目沿主轴从上至下排列
  • row-reverse：主轴水平，项目从右至左排列，与row反向
  • column-reverse：主轴竖直，项目从下至上排列，与column反向

 

.flex-container{
    display: flex;
    height: 100px;
    flex-direction: row; /* 1 */
    flex-direction: column; /*  2*/
    flex-direction: row-reverse; /*  3*/
    flex-direction: column-reverse;/* 4*/
    color: #fff;
}
.flex-item{
  flex: 1
}

 

 

1551022684968-27849df2-dafe-41d0-b922-ba8e3e0434da.png

  

1551022713346-bff7489c-93f6-490d-ae75-9aa45ca493c4.png

 

 

1551022741018-fcd708c0-5218-47e6-a870-7159f8d209a6.png

  

1551022764579-7ecf5f7a-6a58-4a6a-9ac7-ea194f1ffb30.png

 

 

 

flex-wrap

默认情况下，item排列在一条线上，即主轴上，flex-wrap决定当排列不下时是否换行以及换行的方式，可能的值nowrap(默认) | wrap | wrap-reverse

 

nowrap：自动缩小项目，不换行

wrap：换行，且第一行在上方

wrap-reverse：换行，第一行在下面

 

.flex-container{
  display: flex;
  color: #fff;
  flex-wrap: nowrap; /* 1 */
  flex-wrap: wrap; /* 2 */
  flex-wrap: wrap-reverse; /* 3 */
}
.flex-item{
  width: 150px;
  height: 100px;
}
.red{
  width: 300px;
}

 

备注： flex-item宽度定义分别是300px 150px 150px 150px;  所以按照比例2：1：1：1来分割父节点宽度，实际宽度为 150px 75px 75px 75px (合计375px)

 

 

1551024446887-a873e515-182b-41dc-bffc-16b29685e14b.png

1551024865985-4239df93-3540-49f0-b689-7bbb761d55aa.png

 

 

1551024893128-9413b893-2d6f-4b46-8281-0e2a0baa7382.png

 

flex-flow

是flex-direction和flex-wrap的简写形式，如：row wrap | column wrap-reverse等。默认值为row nowrap，即横向排列 不换行。

 

.flex-container{
  flex-flow: row nowrap;
}

 

组合：

flex-flow

nowrap

wrap

wrap-reverse

row

1、row nowrap

5、row wrap

9、row wrap-reverse

column

2、column nowrap

6、column wrap

10、column wrap-reverse

row-reverse

3、row-reverse nowrap

7、row-reverse wrap

11、row-reverse wrap-reverse

column-reverse

4、column-reverse nowrap

8、column-reverse wrap

12、column-reverse wrap-reverse

 

第一种：当flex-wrap设置为nowrap时，属性(宽度比例，非px实际宽度)按照flex-direction来排列

 

resize,w_360

 

resize,w_360

 

resize,w_360

resize,w_360

 

 

第二种： 当flex-wrap设置为wrap时，item则按照实际宽度排列，不足则到下行

 

resize,w_360

 

resize,w_360

 

resize,w_360

 

resize,w_360

 

 

第三种：当flex-wrap设置为wrap-reverse时， item则按照实际宽度排列，不足则到上行

 

resize,w_360

 

resize,w_360

 

resize,w_360

 

resize,w_360

 

 

justify-content

非常重要，决定item在主轴上的对齐方式，可能的值有flex-start（默认），flex-end，center，space-between，space-around。

 

当主轴沿水平方向时，具体含义为

  • flex-start：左对齐
  • flex-end：右对齐
  • center：居中对齐
  • space- between：两端对齐
  • space-around：沿轴线均匀分布

 

备注： 当项目item不满父节点item-container时，flex-start, flex-end不起到作用

 

.flex-container{
  justify-content: flex-start; /* 1 */
  justify-content: flex-end; /* 2 */
  justify-content: center; /* 3 */
  justify-content: space-between; /* 4 */
  justify-content: space-around; /* 5 */
}
.flex-item{
    width: 50px;
    height:50px;
}

 

     

resize,w_460

 

resize,w_460

 

1551027085311-b51a3d53-b72b-4eb7-8985-51ca2d78d0b3.png

 

        

1551027136039-ea11f277-8ec3-4b26-bb18-2180bad87b8a.png

         

1551027158042-4390081f-9797-4a15-97ff-a5fee6263a52.png

 

align-items

决定了item在交叉轴上(Y轴)的对齐方式，可能的值有flex-start | flex-end | center | baseline | stretch

 

当主轴水平(Y轴)时，其具体含义为：

 

  • flex-start：顶端对齐
  • flex-end：底部对齐
  • center：竖直方向上居中对齐
  • baseline：item第一行文字的底部对齐
  • stretch：当item未设置高度时，item将和容器等高对齐

 

备注：父节点flex-container与子节点flex-item存在高度差，才能起到作用

 

.flex-container{
  height: 200px;
  align-items: flex-start; /* 1 */
  align-items: flex-end; /* 2 */
  align-items: center; /* 3 */
  align-items: baseline; /* 4 */
  align-items: stretch; /* 5 */
}
.flex-item{
  height: 100px;
}
.red,.green{
  font-size: 14px;
}

 

   

resize,w_400

       

resize,w_400

        

resize,w_400

 

                

resize,w_400

                 

resize,w_400

 

 

align-content

该属性定义了当有多根主轴时，即item不止一行时，多行在交叉轴轴上的对齐方式。注意当有多行时，定义了align-content后，align-items属性将失效。

 

align-content可能值含义如下（假设主轴为水平方向）：

 

  • flex-start：左对齐
  • flex-end：右对齐
  • center：居中对齐
  • space- between：两端对齐
  • space-around：沿轴线均匀分布
  • stretch：各行将根据其flex-grow值伸展以充分占据剩余空间

 

备注：1、设置flex-wrap：wrap，不然默认nowrap按照比例排满一行。

   2、父节点flex-container与子节点flex-item存在高度差，才能起到作用

 

.flex-container{
  flex-wrap: wrap;
  height:300px;
  background: #969799;
  align-content: flex-start; /* 1 */
  align-content: flex-end; /* 2 */
  align-content: center; /* 3 */
  align-content: space-between; /* 4 */
  align-content: space-between; /* 5 */
  align-content: stretch; /* 6 */
}

 

 

resize,w_400

  

resize,w_400

  

resize,w_400

 

 

resize,w_400

    

resize,w_400

   

resize,w_400

 

 

 

子节点项目

item的属性在item的style中设置。item共有如下六种属性

 

  1. order                            值是整数，默认为0，整数越小，item排列越靠前
  2. flex-grow                      是其他item的放大倍数
  3. flex-shrink                    但空间不足，按照比例被消化, 需在父节点容器中设置flex-basis宽度
  4. flex-basis                      规定item项目的宽度
  5. flex                               是flex-grow flex-shrink flex-basis的总和
  6. align-self                      允许item自己在交叉轴(竖方向)有对齐方式

 

 

order

order的值是整数，默认为0，整数越小，item排列越靠前

 

 

.flex-container{
  flex-flow: wrap;
}
.flex-items{
  order:1;
}

 

 

flex-grow

定义了当flex容器有多余空间时，item是否放大。默认值为0，即当有多余空间时也不放大；可能的值为整数，表示不同item的放大比例

 

备注：item项目未规定宽度，则分配一行宽度，即使规定了宽度也分配多余空间

 

.flex-item{
  flex-grow: 1;
}
/* 1 */
.flex-contanier{
  flex-wrap: wrap;
}
/* 2 */
.flex-contanier{
  flex-wrap: nowrap;
}

 

 

resize,w_400

   

resize,w_400

 

 

flex-shrink

 

定义了当容器空间不足时，item是否缩小。默认值为1，表示当空间不足时，item自动缩小，其可能的值为整数，表示不同item的缩小比例。

 

备注：这个比较懵逼，待解析

 

flex-basis

表示项目在主轴上占据的空间，默认值为auto。

 

.red{
  flex-basis: 100px;
}
.green {
  flex-basis: 100px;
}

 

 

resize,w_400

 

flex

flex属性是flex-grow、flex-shrink和flex-basis三属性的简写总和

 

具体查看以上三个

 

 
align-self

align-self属性允许item有自己独特的在交叉轴上的对齐方式，它有六个可能的值，默认值为auto

 

  • auto：和父元素align-self的值一致
  • flex-start：顶端对齐
  • flex-end：底部对齐
  • center：竖直方向上居中对齐
  • baseline：item第一行文字的底部对齐
  • stretch：当item未设置高度时，item将和容器等高对齐

 

备注：与父节点flex-container中的align-item, align-content同个意思，不同的是align设置的是单个的，而align-items设置的

 

.green{
  align-self: auto;
  align-self: flex-start;
  align-self: flex-end;
  align-self: center;
  align-self: baseline;
  align-self: stretch;
}

 

 

resize,w_400

  

resize,w_400

  

resize,w_400

 

备注：align-self: baseline;   align-self: stretch; 与1 2一样在此不做多介绍，可以参考align-items

转载于:https://my.oschina.net/u/2436852/blog/3015322

flex布局
m0_37136491的博客
09-18 248
文章目录基本概念容器的属性flex-direction主轴的方向（即项目的排列方向）flex-wrap换行flex-flow流形式justify-content主轴上的对齐align-items交叉轴上的对齐align-content多根轴线的对齐方式，如只有一根轴线，该属性不起作用项目的属性order项目的排列顺序flex-grow存在剩余空间之下项目的放大比例flex-shrink存在空间不足...
再次简单明了总结flex布局，一看就懂...
weixin_33705053的博客
02-26 146
思维导图 flex 布局 类型 [ ] display: flex;(本文章为此为主) [ ] display；inline-flex; 属性 [ ] 父节点 容器flex-container [ ] 子节点 flex-item 父节点容器 flex-direction 主轴方向(一般水平方向) f...
flex布局设置space-between，最后一行有缺省时如何左对齐
djs0513的博客
07-13 3055
使用flex弹性布局，两端对齐是设置justify-content:space-between。但是当一行当中的元素有缺省时，不能自动靠左排列，视觉上不够美观，如下图所示： 图示示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin: 0;padding: 0
flex布局两端对齐space-between，最后一行如果不满的话则从左对齐
xiaopangzipy的博客
05-15 2184
给容器元素增加伪类，宽度为子元素宽度 &:after { content: ''; width: 200rpx; }
什么是space-around
最新发布
思索的涟漪，突破自我
09-20 2294
所以简单来说,space-around在Flex布局中能够使子项均匀分布,并给首尾子项留出相应的空间。space-around的值表示子项会均匀地分布在容器里,子项之间的间隔相等。使用space-around后,子项会均匀分布,每两个子项之间的间隔相等,第一个和最后一个子项与容器边界也会有相同的间距。在CSS中,space-around是justify-content属性的一个值。space-around:包含边界间隔,但是边界间隔只有子项间隔的一半。
flex布局——align-items属性垂直之共有flex-start、center、flex-end& justify-content属性水平之space-around、space-between
热门推荐
weixin_44867717的博客
12-04 1万+
flex
CSS3 flex布局总结.docx
11-03
CSS3 flex布局总结 在 CSS3 中，flex 布局（Flexible Box）是一种强大的布局模式，可以实现各种页面布局。Flex 布局的主要特点是可以简便、完整、响应式地实现各种页面布局，并且已经得到所有浏览器的支持。 Flex...
微信小程序开发flex布局总结
03-29
相对定位和绝对定位这个见得比较多，比起flex麻烦很多，坚决舍弃了，总结一下flex布局的资料，留备查用。如有不足，希望各位道友助攻。 不管是APP开发还是前端开发，最恶心最头痛的就是对各种屏幕的适配了。。。一不...
flex布局简单总结
01-08
一、flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 注意 任何一个容器都可以指定为 flex 布局（行内元素也可以使用 flex 布局） Webkit 内核的浏览器，必须...
Flex布局.xmind
07-09
Flex布局.xmind
CSS中的flex布局
sumisu666的博客
01-28 410
目录1、flex 布局的概念2、容器的属性2.1、flex-direction（设置子元素的排列方向）2.2、flex-wrap属性（设置是否换行）2.3、flex-flow 属性（flex-direction和flex-wrap的结合）2.4、justify-content属性（设置子元素在横轴上的排列） 2.5、align-items属性（设置子元素在纵轴上的排列）2.6、align-content属性（设置每行子元素之间的排列方式） 3、子元素的属性 3.1、order
flex弹性盒子解析
weixin_42184908的博客
03-15 361
1.它是什么？ 官方说法：Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定胃Flex布局。 我的说法：flex就是一种布局方式，想让他上下居中可方便了，还有等分功能。 2.它的概念又是什么？ 采用Flex布局的元素，称为Flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目(Flex item),简称"项目"。 ...
一劳永逸的搞定 flex 布局
front_end_fan
07-13 704
jQuery Ajax 实例 (.ajax、.ajax、.post、$.get)
Flex布局
Elltor
08-27 699
在我看书学习flex布局有疑惑后，在网上搜到了这篇文章，讲的很详细，一遍就差不多了就懂flex布局了，感谢原作者！ 上上下下读五六遍，在其中纠正了一些错别字、加粗了一些文字、添加了一些标点，会使文章读起来更顺畅些，以后要像这样写博客。 转载地址：https://www.cnblogs.com/dreamperson/p/9367008.html 博主主页：https://www.cnblog...
你必须知道的flex伸缩布局
lmy233的博客
10-16 2484
伸缩布局： display:flex;让大盒子成为容器，容器有主轴和侧轴； 子盒子是容器的项目，项目默认会从主轴的起点沿主轴的方向依次排列，如果超过容器，则会自动收缩，不换行 所以一定要注意当前主轴的起点在什么地方 容器的6个属性：写在容器的css里 —1--- flex-direction控制主轴的方向： row→：默认值，主轴呈现水平方向从左往右 column↓：主轴呈现垂直方向从上往下，项目会垂直排列，侧轴会变成水平方向从右往左 row-reverse← 主轴呈现水平方向从右往左，项目的排列也会反过来
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值