flex布局初探

最新推荐文章于 2023-11-04 10:15:31 发布

VVVGG

最新推荐文章于 2023-11-04 10:15:31 发布

阅读量387

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/VVVZCS/article/details/82662151

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

dom结构

1，左上

2，中上

3，右上

4，左中

5，中间

6，右中

7，左下

8，中下

9，右下

------------------------------------------------------------------------------

flex-direction ---决定主轴的方向，即项目的排列方向

如：

flex-grow--定义项目的放大比例，默认为0，即如果存在剩余空间也不进行放大，

假如有A,B,C三个元素（不考虑高度），A：flex-grow：0 ，B:flex-flow:1 ， C:flex-flow:2，页面上的剩余长度为90px，那么A元素大小不变，B长度增加30px，C长度增加60px

-------------------------------------------------

flex-shrink--定义了项目的缩小比例，默认为1，即如果空间不足，那么该项目要缩小

假如有A,B,C三个元素（不考虑高度），A：flex-shrink：0，B：flex-shrink：1，C：flex-shrink：1，那么当页面长度不够时，A元素不缩小，B和C等比例缩小

-------------------------------------------------

flex-basis--定义了项目在分配剩余空间之前，所占的主轴空间，浏览器根据这个属性来判断是否有剩余空间，默认值为auto，即项目原本的大小

--------------------------------------------------

flex属性是flex-grow，flex-shrink和flex-basis的复合属性，默认值为 0，1，auto，后两个值选填

该属性有两个快捷值：auto（1,1，auto） none（0,0，auto）

优先建议使用这个属性，而不是三个分离的属性，因为浏览器会推算相关值

--------------------------------------------------

flex-wrap: 子元素是否在一行显示

值：nowrap（不换行）/wrap（换行）/wrap-reverse (换行，第一行在下方)，默认值：no-wrap

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
    }
    .box{
      width: 400px;
      height: 400px;
      border: 1px solid #000;
      display: flex;
    }
    .demo{
      width: 100px;
      height: 100px;
      background-color: #f40;
      text-align: center;
      line-height: 100px;
      color: #fff;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="demo">1</div>
    <div class="demo">2</div>
  </div>
</body>
<script>
</script>
</html>

在父元素上加上一个display：flex

会发现元素自动水平排列，所以对于flex布局来说，不用去加float，加了也没有效果

VVVGG

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex布局初探

dom结构1，左上2，中上3，右上4，左中5，中间6，右中7，左下8，中下9，右下------------------------------------------------------------------------------flex-direction ---决定主...
复制链接

扫一扫