Flex布局

最新推荐文章于 2024-06-14 14:36:26 发布

全栈＿ing

最新推荐文章于 2024-06-14 14:36:26 发布

阅读量331

点赞数 7

文章标签： css css3 前端

本文链接：https://blog.csdn.net/haihuiyiuyihm/article/details/134759055

版权

常见父项属性

align-content

<style>
    .box {
      display: flex;

      flex-wrap: wrap;
      /* 因为换行了所以控制侧轴上子元素对齐方式用 align-content*/
      align-content: center;
      width: 800px;
      height: 300px;
      background-color: pink;
    }

    span {
      margin: 5px;
      width: 150px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>

<body>
  <!-- 多行情况下可以使用 -->
  <!-- space-around 平分剩余空间 -->
  <!-- space-between 两边贴近，在平分剩余空间 -->
  <!-- flex-start 默认值左到右 -->
  <!-- center 在主轴居中对齐 -->
  <div class="box">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
</body>

效果图

justify-content

<style>
    .box {
      display: flex;
      /* 该属性控制主轴上元素排列的方式 */
      justify-content: space-between;
      width: 100%;
      height: 300px;
      background-color: pink;
    }

    span {
      width: 150px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>

<body>
  <!-- 通过给父元素添加属性来做到控制子元素的样式 -->
  <!-- 设置主轴上子元素的排列方式 -->
  <!-- flex-start 默认值左到右 -->
  <!-- center 在主轴居中对齐 -->
  <!-- space-around 平分剩余空间 -->
  <!-- space-between 两边贴近，在平分剩余空间 -->
  <div class="box">
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
</body>

效果图

flex-direction：把主轴设置为Y，因为使用了flex之后默认为X

<style>
    .box {
      display: flex;
      /* 把主轴设置为 Y 轴 */
      flex-direction: column;
      width: 800px;
      height: 300px;
      background-color: pink;
    }

    span {
      width: 150px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>

<body>
  <!-- 设置主轴排列方式
row 默认从左到右
column 从上到下   
  -->
  <div class="box">
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
</body>

效果图

flex-wrap ：控制元素是否换行默认不换 flex-wrap：wrap换行

align-items：控制侧轴的元素排列方式

<style>
    .box {
      display: flex;
      justify-content: center;
      /*  控制侧轴上元素排列方式*/
      /* center属性保证了元素垂直居中对齐 */
      align-items: center;
      width: 800px;
      height: 300px;
      background-color: pink;
    }

    span {
      width: 150px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>

<body>
  <!-- 适用于单行盒子 -->
  <!-- 设置侧轴上子元素的排列方式 -->
  <!-- flex-start默认上到下 -->
  <!-- center 挤在一起居中 垂直居中 -->
  <!-- stretch 拉伸 -->
  <div class="box">
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
</body>

全栈＿ing

关注

7
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
Flex布局

flex-wrap ：控制元素是否换行默认不换 flex-wrap：wrap换行。flex-direction：把主轴设置为Y，因为使用了flex之后默认为X。align-items：控制侧轴的元素排列方式。
复制链接

扫一扫

Flex布局

“相关推荐”对你有帮助么？