Flex布局

最新推荐文章于 2024-05-05 09:59:46 发布

weixin_33843409

最新推荐文章于 2024-05-05 09:59:46 发布

阅读量131

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qdxbls/p/11060532.html

本文介绍了Flex布局，它是伸缩布局，相比传统布局方案更灵活。给父元素设置display:flex可创建伸缩盒子。文中详细讲解了flex-direction、justify-content、align-items等常用属性，还介绍了flex-flow属性，并给出简单案例说明如何使用这些属性进行布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Flex布局又名伸缩布局

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便。

CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

前提：给父元素设置一个display:flex .可以设置一个伸缩盒子，里面所有的元素都是伸缩项。

常用的属性：

1. flex-direction：确认主轴的方向，也就是元素排列的方向

row（行默认值是x方向从左到右排列）
column 列竖直方向从上往下排列
row-reverse 水平方向从右往左排列
column-reverse 竖直方向由下往上排列

这个时候要注意水平方向一个是主轴，另外一个就是副轴

2. justify-content 主轴上的对其方式，这个主轴就是1 flex-direction设置的

flex-start 左对齐
flex-end 右对其
center 居中对
space-round 这个是空在元素的周围，所以左右都是有空隙的，且中间是两边的
space-between between在什么中间左右是没有缝隙的，空隙在元素之间平分

3.align-items 侧轴上的对齐方式

flex-start 默认上对其
flex-end 下对齐
center 默认中间对齐
stretch 侧抽上的拉伸，关注高度设置，不生效

这个时候有两个问题 1.什么叫侧轴？比如刚才flex-direction设定的为row那竖直方向就是侧轴

2. 设置direction对侧轴上的排列方式有什么影响吗？

在来一个简单的，设置竖直方向为正方向，那对竖直方向做的任何事情都是justify-content，对横轴做的任何事情都是align-items

简单的案例：

分析：

1.先对子元素div进行水平方向的排列。这个时候用到伸缩盒子的属性设置flex=1

2.对每个子元素下的两个元素进行垂直居中：先对子元素进行flex-direction:colum;默认方向是从上往下排列

然后对副轴也就是横轴设置一个align-items：center;让其在子元素内垂直居中

<body>
  <div class="p">
    <div class="s">
      <div class="img"></div>
      <span>info</span>
    </div>
    <div class="s">
      <div class="img"></div>
      <span>info</span></div>
    <div class="s">
      <div class="img"></div>
      <span>info</span></div>
    <div class="s">
      <div class="img"></div>
      <span>info</span></div>
    <div class="s">
      <div class="img"></div>
      <span>info</span></div>
  </div>
</body>

 <style>
    .p {
      width: 500px;
      height: 100px;
      border: 1px solid #000;
      /* 1.flex布局 */
      display: flex;
      /* 2.默认主轴：row */
      flex-direction: row;
    }
    
    .s {
      width: 100px;
      height: 80px;
      background-color: blue;
      /* 3.子元素flex布局 */
      display: flex;
      /* 4.确认主轴方向 ：列*/
      flex-direction: column;
      /* 5.单行侧轴：行，行对齐 */
    
    }
    
    .img {
      width: 40px;
      height: 40px;
      background-color: #fff;
      border-radius: 50%;
    }
  </style>

4. flex-flow: flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。它用来设置或检索弹性盒模型对象的子元素排列方式,它的两种取值：flex-direction：定义弹性盒子元素的排列方向。flex-wrap：控制flex容器是单行或者多行。