Flex макет удобен и гибок. Умелое использование гибкого макета может решить большинство проблем макета. Вот краткое изложение некоторых распространенных сценариев макета.
макет веб-страницы (панель инструментов + главная панель + foobar)
образец кода
Достигаемый эффект следующий:
html код:
<div class="container">
<header>header...</header>
<main>内容</main>
<footer>footer...</footer>
</div>
css-код:
header{
height:100px;
background:#ccc;
}
footer{
height:100px;
background:#ccc;
}
.container{
display:flex;
flex-direction:column;
height:100vh;
}
main{
flex-grow:1;
}
Применяемые свойства гибкости
В этом примере в основном применяются следующие свойства гибкости:
- flex-direction:column заставляет весь макет двигаться сверху вниз.
- flex-grow: 1, применяется к main, так что main автоматически заполняет оставшееся пространство
В этом примере приложение реализует традиционную верхнюю, среднюю и нижнюю разметку страницы с меньшим количеством кода CSS.Ключевым моментом является использование flex-grow, чтобы избежать проблемы, связанной с тем, что часть нижнего колонтитула будет поднята наверх страницы, когда основной содержимое слишком маленькое (традиционный способ, возможно, потребуется решить с помощью абсолютного позиционирования~)
Элементы списка с фиксированным количеством элементов в строке и переносом слов
Достигаемый эффект следующий:
html код:
образец кода
css-код:
ul{
display:flex;
flex-wrap:wrap;
}
li{
list-style:none;
flex:0 0 25%;
background:#ddd;
height:100px;
border:1px solid red;
}
Применяемые свойства гибкости
В этом примере в основном применяются следующие свойства гибкости:
-
flex: 0 0 25%, что эквивалентно flex-basis: 25%, делает ширину каждого элемента списка равной 25% внешнего контейнера (элемент ul в этом примере), так что каждая строка может содержать до четырех элементы списка.
-
flex-wrap: перенос, чтобы каждая строка автоматически переносилась при заполнении
Реализуйте элементы списка, которые автоматически разделяют лишнее пространство
Результат этого примера очень похож на рисунок 2 в предыдущем примере, за исключением того, что каждая строка имеет 3 элемента списка фиксированной ширины, а между элементами списка есть промежутки одинаковой ширины.
Для достижения этого эффекта традиционным способом неизбежно использование отрицательного запаса, поэтому теперь давайте посмотрим, как добиться этого с помощью flex
образец кода
css-код:
ul{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
border:1px solid black;
}
li{
list-style:none;
width:120px;
background:#ddd;
height:100px;
border:1px solid red;
}
Применяемые свойства гибкости
В этом примере в основном применяются следующие свойства гибкости:
- justify-content:space-between; сделать дополнительное пространство в направлении главной оси равномерно распределенным между двумя элементами
Сетка, которая равномерно распределяет пространство
Макет сетки в основном является одним из необходимых макетов в основных пользовательских интерфейсах, а макет с четным распределением является наиболее часто используемым макетом в макете сетки.Ключом к использованию flex для достижения равномерно распределенного макета сетки является использование его автоматического сокращения пространства. . . .
Пример
html выглядит следующим образом:
<div class="row">
<div class="column">column1</div>
<div class="column">colum22</div>
<div class="column">colum322</div>
</div>
css выглядит следующим образом:
.row{
display:flex;
flex-wrap:wrap;
border:1px solid black;
}
.column{
list-style:none;
background:#ddd;
flex:1;
height:100px;
border:1px solid red;
}
Применяемые свойства гибкости
В этом примере в основном применяются следующие свойства гибкости:
- flex: 1 Здесь flex: 1 применяется к элементу, что эквивалентно flex: 1 1 0%, и причина, по которой независимо от ширины содержимого каждого элемента столбца, может быть разделена на равное пространство, официально потому что это эквивалентно установке flex-grow: 1 делает оставшееся пространство автоматически распределяемым в равных пропорциях и устанавливает flex-basis: 0%, чтобы все пространство было равномерно распределено (подробнее о свойстве аббревиатуры [flex] ткнитеРаспознавание свойств аббревиатуры Flex — [FLEX]).
Макет Святого Грааля
Традиционный макет Holy Grail должен включать в себя самые неприятные атрибуты, такие как абсолютное позиционирование, плавание и отрицательное поле.После создания гибкого макета я обнаружил, что такая простая формула может также достигать такого сложного эффекта~
образец кода
html код:
<div class="container">
<main>main</main>
<aside>aside</aside>
<nav>nav</nav>
</div>
css-код:
.container{
display:flex;
height:100vh;
}
aside{
width:50px;
background:#ccc;
}
main{
flex-grow:1;
background:#def;
}
nav{
width:80px;
background:#ccc;
order:-1;
}
Применяемые свойства гибкости
- Используйте flex-grow: 1 для основного, чтобы автоматически расширять пространство среднего основного элемента.
- Применить порядок:-1 к навигации, чтобы порядок был в крайнем левом положении (основной пишется вверху в html, чтобы упростить загрузку основной области содержимого в первую очередь)
Элементы центрированы по горизонтали и вертикали
Как центрировать элемент по горизонтали и вертикали одновременно? Ответы разнообразны и сложны, но flex, безусловно, самый простой среди таких разнообразных ответов~
образец кода
html код:
<div class="container">
<div class="inner">我是中间的内容</div>
</div>
css-код:
.container{
height:300px;
width:300px;
border:1px solid red;
display:flex;
justify-content:center;
align-items:center;
}
.inner{
border:1px solid black;
}
Применяемые свойства гибкости
- justify-content:center; Центрировать элемент элемента по горизонтали
- align-items: center; центрировать элемент элемента по вертикали
Существует так много сцен, что использовать flex несложно, и он действительно оправдывает свою репутацию~( Если вы хотите узнать больше о свойствах, связанных с flex, нажмитеНачало работы с Flex — узнайте об этих свойствах Flex~)