flex布局

usrname为username

已于 2023-04-06 21:11:58 修改

阅读量415

点赞数

文章标签： html css 前端

于 2023-04-04 19:08:16 首次发布

本文链接：https://blog.csdn.net/weixin_54327001/article/details/129956036

版权

只设置一个display:flex,此时存在的隐藏的默认属性有:

属性名	默认属性	样式
flex-direction	row	沿主轴方向排布
flex-wrap	nowrap	单行排列
justify-content	flex-start	与主轴方向对齐排布
align-item	normal/stretch	如果交叉轴方向高度为auto,拉伸到与container同一高度
align-content	stretch	?
order	0	按照文档中出现顺序排列
align-self	auto	遵循align-items的设置
flex-grow	0

设置display属性为flex或者inline-flex可以成为flex container

flex：flex container以block-level形式存在

inline-flex：flex container以inline-level形式存在

对box设置display:flex

display: inline-flex;

主轴与交叉轴

主轴从左到右,交叉轴从上到下

flex相关的属性

flex-direction(是否沿主轴/交叉轴)

row(沿主轴方向,默认)

row-reverse (逆主轴)

column(交叉轴)

column-reverse(逆交叉轴)

flex-wrap(单行还是多行)

默认是单行,如果添加盒子,无视内部item已经设置好的宽度,无限压缩

flex-wrap: wrap;

wrap-reverse

flex-flow(flex-direction与flex-wrap的缩写)

flex-flow（direction+wrap）

顺序都可

 flex-flow: wrap row-reverse;

justify-content(主轴上对齐方式)

align-item(交叉轴上的对齐方式)

非normal/stretch情况下,不设置高度,则自动根据内容撑起高度

align-content(多行内容主轴对齐)

flex-item的属性order(手动设置排列顺序,从小到大分布)

    .item1 {
      order: 5;
    }
 
    .item2 {
      order: 3;
    }
 
    .item3 {
      order: 9;
    }

flex-item的属性align-self (内部交叉轴对齐方式)

    .container {
      width: 500px;
      height: 500px;
      background-color: orange;
 
      display: flex;
 
      align-items: center;
    }
 
    .item {
      width: 120px;
      /* height: 120px; */
    }
 
    .item1 {
      height: 90px;
    }
 
    .item2 {
      height: 150px;
 
      align-self: flex-start;
    }
 
    .item3 {
      height: 120px;
    }

flex-item的属性flex-grow(如何拉伸??)

当大于0时,且主轴有剩余,拉伸

flex-item属性flex-shrink(如何收缩?)

    .container {
      width: 500px;
      height: 500px;
      background-color: orange;
 
      display: flex;
    }
 
    .item {
      width: 120px;
      height: 120px;
 
      flex-shrink: 0;
    }
 
    .item1, .item2 {
      flex-shrink: 1;
    }
 
    .item1 {
      min-width: 100px;
    }

flex-item属性-flex-basis(?)

解决space-between最后一行的问题

前:

后:

  .container {
      width: 500px;
      background-color: orange;
 
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
 
    .item {
      width: 110px;
      height: 140px;
 
      /* margin-right: 20px; */
    }
 
    .container > i {
      width: 110px;
    }
 
    /* .item:nth-child(4n) {
      margin-right: 0;
    } */
  </style>
</head>
<body>
   
  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item3">3</div>
    <!-- 添加span的个数是列数减-2 -->
   <i></i><i></i>
  </div>