Вы не знаете флекс

внешний интерфейс CSS
Вы не знаете флекс

предисловие

вы бы действительно использовалиflex?

Что еще может делать flex кроме вертикального центрирования?

Эта статья подходит для читателей, которые используют flex layout для вертикального центрирования и не понимают других способов использования flex.

автоматическая полная высота

Во-первых, давайте создадим контейнер, содержащий два элемента, box1 и box2.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex</title>
    <link rel="stylesheet" href="index.css">
  </head>
  <body>
    <div class="flex-container">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </body>
</html>

css часть

.flex-container{
  width:100vw;
  height:100vh;
  display:flex;
  flex-direction: column;
}

.flex-container .box1{
  width:100%;
  height:300px;
  background: red;
}

.flex-container .box2{
  width:100%;
  flex-grow: 1;
  flex-shrink: 1;
  background: green;
}

Просто установите направление основной оси на столбец и установите для дочерних свойств flex-grow и flex-shrink значение 1.

image.png

Многослойная гибкая автоматическая высота не действует

Сначала преобразуйте исходную структуру DOM

<div class="flex-container">
      <div class="box1"></div>
      <div class="box2">
        <!-- 添加代码部分 start -->
        <p>this is a p</p>
        <div class="box2_wrap">
          <ul>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
            <li>this is text</li>
          </ul>
        </div>
        <!-- 添加代码部分 end -->
      </div>
    </div>

Наша цель — автоматически поднять box2_wrap и добиться эффекта прокрутки переполнения, ожидаемого эффекта.

image.png

Код эффекта реализации css выглядит следующим образом

.flex-container .box2{
  width:100%;
  flex:1;
  background: green;
  display:flex;
  flex-direction: column;
}

.flex-container .box2 p{
  height:200px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.flex-container .box2_wrap{
  background:#fff;
  flex: 1;
  display:flex;
  flex-direction: column;
  overflow:auto;
}

提示：flex:1是flex-grow: 1和flex-shrink: 1的缩写

Фактический эффект выглядит следующим образом

image.png

如何解决？

Просто установите высоту на 0 для box2

.flex-container .box2{
  width:100%;
  flex:1;
  background: green;
  display:flex;
  flex-direction: column;
  
  height:0  //给box2设置高度为0
}

image.png

Альтернативная высота строки

Мы знаем, что line-height можно использовать для установки высоты строки.

Известно, что есть ul высотой 250px, и в нем 5 li

Установив высоту li на 50 пикселей, высоту ul можно разделить поровну.

如果在不知道ul高度并且不知道li数量的情况下，如何等分ul的高度？

<div class="flex-container">
  <ul>
    <li>this is text</li>
    <li>this is text</li>
    <li>this is text</li>
    <li>this is text</li>
    <li>this is text</li>
  </ul>
</div>

.flex-container{
  width:100vw;
  height:100vh;
}

.flex-container ul{
  height:100%;
}

.flex-container ul li{
  background:yellow;
  border:2px solid #fff;
}

image.png

Мы можем передать флексflex-growАтрибут автоматически выделяет оставшееся место для увеличения элемента элемента для достижения

.flex-container ul{
  height:100%;
  display:flex;
  flex-direction:column;
}

.flex-container ul li{
  background:yellow;
  border:2px solid #fff;
  flex-grow: 1;
  display:flex;
  justify-content:center;
  align-items:center;
}

Эффект следующий

image.png

Сортировать

Обычно данные, которые мы получаем из фона, не по порядку, мы можем передать flexorderАтрибут для отображения элементов по порядку

Вот пример таблицы лидеров

<div class="flex-container">
  <h5>排行榜</h5>
  <ul>
    <li>第一名</li>
    <li>第二名</li>
    <li>第三名</li>
  </ul>
</div>

.flex-container{
  width:100vw;
  height:100vh;
  padding-top:300px;
}

.flex-container h5{
  text-align:center;
  font-size:20px;
  margin-bottom:20px;
}

.flex-container ul{
  height:100%;
  display:flex;
  justify-content:center;
}

.flex-container ul li{
  width:100px;
  height:100px;
  line-height:100px;
  text-align:center;
  border-radius: 100%;
  background:yellow;
  margin:20px;
}

.flex-container ul li:nth-child(1){
  order:1;
  position:relative;
  top:-20px;
}

.flex-container ul li:nth-child(2){
  order:0;
}

.flex-container ul li:nth-child(3){
  order:2;
}

image.png

Суммировать

Выше приведены еще несколько практических советов по гибкости.

Если вы считаете, что это хорошо, не забудьте поставить лайк! ❤️❤️❤️

Категории