flex各属性效果及图示

孤城浪人

已于 2023-06-19 23:01:46 修改

阅读量444

点赞数 1

分类专栏： web前端文章标签：前端 css3

于 2022-04-08 17:29:20 首次发布

本文链接：https://blog.csdn.net/weixin_46015333/article/details/123972027

版权

web前端专栏收录该内容

13 篇文章 7 订阅

订阅专栏

文章目录

示例图片的代码
flex常见父项属性
子项常见属性

示例图片的代码

  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>flex:1</title>
      <style>
          .box {
              width: 500px;
              height: 200px;
              display: flex;
              background-color: aqua;
          }
  
          #box1 {
              background-color: pink;
              width: 100px;
              height: 100px;
          }
  
          #box2 {
              background-color: yellow;
              width: 100px;
              height: 100px;
          }
          #box3 {
              background-color: green;
              width: 100px;
              height: 100px;
          }
      </style>
  </head>
  <body>
      <div class="box">
          <div id="box1">box1</div>
          <div id="box2">box2</div>
          <div id="box3">box3</div>
      </div>
  </body>

flex常见父项属性

flex-direction：设置主轴方向

默认主轴方向就是x轴方向，水平向右
默认侧轴方向就是y轴方向，水平向下
1. row：默认从左到右
2. row-reverse：从右到左
3. clumn：从上到下
4. clumn-reverse：从下到上

/*主轴从左到右*/
flex-direction:row;

请添加图片描述

/*主轴从上到下*/
flex-direction:clumn;

请添加图片描述

justify-content：设置主轴上子元素排列方式

flex-start：从头部开始排列
flex-end：从尾部开始排列
center：在主轴居中对齐
space-around：平分剩余空间
space-between：两边贴边，再平分剩余空间
flex-wrap：设置子元素是否换行,如果不换行，当子元素总宽度大于父元素宽度时会自动压缩子元素宽度，如图
wrap：换行

align-content：设置侧轴上子元素的排列方式（多行）

flex-start：在侧轴头部开始排列
flex-end：在侧轴尾部开始排列
center：在侧轴中间显示
space-around：子项在侧轴平分剩余空间
space-between：子项在侧轴先分布在两头，再平分剩余空间
stretch：设置子项元素高度平分父元素高度

align-items：设置侧轴上的子元素排列方式（单行）

flex-start：默认值，从上到下
flex-end：从下到上
center：挤在一起居中（垂直居中）
stretch：拉伸（不要给子元素高度值）

flex-flow：符复合属性，相当于直接设置了flex-direction和flex-wrap

子项常见属性

flex子项目占的份数

flex:3;平分剩余空间，该子项占3份

      <style>
          .box {
              width: 250px;
              height: 300px;
              display: flex;/*默认按从左到右主轴排列
              background-color: aqua;
          }
          #box1 {
              background-color: pink;
              flex: 1;
          }
          #box2 {
              background-color: yellow;
              flex: 2;
          }
          #box3 {
              background-color: green;
              flex: 1;
          } 
      </style>
      <div class="box">
          <div id="box1">box1</div>
          <div id="box2">box2</div>
          <div id="box3">box3</div>
      </div>

请添加图片描述

align-self控制子项自己在侧轴的排列方式

例：给box3添加

align-self:flex-end;

请添加图片描述

order属性定义之乡的排列顺序（前后顺序）默认为0

order:-1;/*给box3添加，效果如图*，order值越小就越排在前面/

请添加图片描述
好了flex的知识点就这么多了。

孤城浪人

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex各属性效果及图示

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录示例图片的代码flex常见父项属性flex-direction：设置主轴方向justify-content：设置主轴上子元素排列方式align-content：设置侧轴上子元素的排列方式（多行）align-items：设置侧轴上的子元素排列方式（单行）flex-flow：符复合属性，相当于直接设置了flex-direction和flex-wrap子项常见属性flex子项目占的份数align-self控制子项自己在侧轴的排列方式or.
复制链接

扫一扫

专栏目录