Flex布局 Flex用法弹性布局

最新推荐文章于 2024-06-21 00:05:48 发布

把我的格子衫拿来

最新推荐文章于 2024-06-21 00:05:48 发布

阅读量1k

点赞数 5

本文链接：https://blog.csdn.net/weixin_53259688/article/details/114277816

版权

一、Flex 布局就是"弹性布局"，用来为盒子提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局

加了display: flex;属性，我们就可以认为该盒子是一个弹性容器了

//css代码块
 .box {
   
      width: 300px;
      height: 300px;
      border: 1px solid black;
      display: flex;
    }

    .info {
   
      width: 50px;
      height: 50px;
      border: 1px solid red;
      text-align: center;
      line-height: 50px;
    }

//html代码块
 <body>
  <div class="box">
    <div class="info">1</div>
    <div class="info">2</div>
    <div class="info">3</div>
  </div>
</body>

在这里插入图片描述

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

二、概念

采用 Flex 布局的元素，称为 Flex 容器，简称"容器"，或者弹性盒子。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
在这里插入图片描述

Flex容器默认存在两根轴：水平的主轴和垂直的侧轴，项目默认沿主轴排列。

三、属性

这些属性需要加在容器上，不可以加在项目上

· flex-direction
· just-content
· flex-wrap
· align-items
· align-content

3.1、flex-direction属性

flex-direction属性决定主轴的方向与项目的排列方向。
在这里插入图片描述

//默认X为主轴，从左到右排列，对应图中第一个盒子
.box1

最低0.47元/天解锁文章

把我的格子衫拿来

关注

5
点赞
踩
6

收藏

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

一、Flex 布局就是"弹性布局"，用来为盒子提供最大的灵活性。任何一个容器都可以指定为 Flex 布局加了display: flex;属性，我们就可以认为该盒子是一个弹性容器了//css代码块 .box { width: 300px; height: 300px; border: 1px solid black; display: flex; } .info { width: 50px; height: 50
复制链接

扫一扫