предисловие
В прошлый раз я упомянул, что рекомендуется адаптация мобильного терминала, используя px в качестве основного, vw, процент в качестве вспомогательного, а затем с flex-макетом, поэтому некоторые люди начали спрашивать меня, как использовать этот flex-макет, разобраться, консолидировать
сгибать прошлое и настоящее
Когда html, css, js только зарождались во фронтенде, и они были еще в начальной стадии, когда фронтенд-инжиниринга не существовало, когда jquery еще правил реками и озерами, и когда еще шла эта картинка огонь, а! Я снова украл картинку
Мы хотим реализовать, что два div отображаются подряд, за исключением inline блочных элементов, мы можем использовать только этот float, который люди любят и ненавидят
float
Свойство float определяет, в каком направлении перемещается элемент. Традиционно это свойство всегда применялось к изображениям для переноса текста вокруг изображения, но в CSS любой элемент может плавать. Плавающий элемент генерирует блок уровня блока, независимо от того, какой это элемент.
На самом деле, первоначальный дизайн float предназначен только для достижения: эффекта обтекания текста, но позже, в ходе быстрого развития внешнего интерфейса, float пытались использовать для макета, поэтому позже flaot согласился превратиться в атрибут макета, хотя это очень хорошо Однако, поскольку первоначальный замысел дизайна не для макета, то форсирование шляпы макета, конечно, будет иметь много побочных эффектов!
побочный эффект
1. Если для дочерних элементов установлено значение float, это приведет к краху родительского элемента, то есть родительский элемент не сможет поддерживаться, как показано на следующем рисунке:
2. Невозможно добиться динамической адаптивной верстки,
Например, если вы хотите добиться макета из двух равных частей и одного ряда, ширина должна быть 50%, но если вдруг три равных части, то установки ширины в 50% явно недостаточно.
3. Значение параметра заполнения полей не может отображаться правильно.
Из-за плавающего значения свойства CSS padding и CSS margin, установленные между родительским и дочерним элементами, не могут быть выражены правильно. В частности, отступы и поля на верхней и нижней сторонах не могут отображаться правильно.
4. Если предыдущий элемент установлен как плавающий, последний элемент может оказаться не на своем месте.
Как показано на рисунке, поскольку элемент 1 всплывает и покидает поток документов, элемент 2 поднимается вверх.
Эти проблемы очень огорчают многих разработчиков, особенно в относительно сложных проектах, различные поплавки будут сильно усложнять страницу (особенно на мобильном терминале), будут странные баги, которые сложно решить, можно запутаться.
Затем, с появлением мобильного Интернета, страницы h5 на мобильном терминале стали подавляющими.Традиционное решение для макета основано на блочной модели и опирается на атрибут display + атрибут position + атрибут float. Это очень неудобно для мобильной верстки (цитирую г-на Руана), поэтому родился флекс, и, наконец, этот универсальный поплавок наконец-то собирается уйти со сцены истории!
Предварительное исследование гибкости
В 2009 году W3C предложила новую схему макета Flex (Flexible Box Model), которая позволяет реализовать различные макеты страниц просто, полностью и быстро. В настоящее время он поддерживается всеми браузерами, а это значит, что теперь использовать эту функцию безопасно.
что такое флекс
Цитируя известную поговорку Лао Луо, смотрите на вещи, не говоря чепухи, на самом деле назначьте контейнеру свойство display как flex
//比如这样以后div就具有弹性了
div{
display:flex;
}
Элементы, использующие раскладку Flex, называются flex-контейнерами или, для краткости, «контейнерами». Все его дочерние элементы автоматически становятся членами контейнера, называемыми flex-элементами (flex-элементами), или для краткости «items».
Какими свойствами обладает флекс
Свойства flex доступны как в контейнере, так и в элементе, и давайте послушаем это медленно!
свойства гибкого контейнера
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
1. свойство flex-direction
Свойство flex-direction определяет направление главной оси (то есть направление, в котором располагаются элементы).
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
//依次表示主轴为水平方向，起点在左端。（默认）
//主轴为水平方向，起点在右端。
//主轴为垂直方向，起点在上沿。
//主轴为垂直方向，起点在下沿。
2. свойство flex-wrap
По умолчанию элементы располагаются на линии (она же «ось»). Свойство flex-wrap определяет способ переноса, если одна ось не подходит.
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
//依次是不换行
//换行，第一行在上方。
//换行，第一行在下方。
}
3. свойство гибкого потока
Свойство flex-flow является сокращением для свойства flex-direction и свойства flex-wrap Значением по умолчанию является row nowrap.
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
4, атрибут justify-content (это очень важно, часто используется)
Свойство justify-content определяет выравнивание элементов по главной оси.
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
//依次是左对齐（默认值）
//右对齐
//居中
//两端对齐，项目之间的间隔都相等。
//每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
}
5. Атрибут align-items (это тоже очень важно. Также часто используется)
Свойство align-items определяет, как элементы выравниваются по поперечной оси.
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
//依次是交叉轴的起点对齐。
//交叉轴的终点对齐。
//交叉轴的中点对齐。
//项目的第一行文字的基线对齐。
//如果项目未设置高度或设为auto，将占满整个容器的高度（默认值）
}
6. атрибут align-content
Свойство align-content определяет выравнивание нескольких осей. Это свойство не действует, если элемент имеет только одну ось.
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
//依次是与交叉轴的起点对齐。
//与交叉轴的终点对齐。
//与交叉轴的中点对齐。
//与交叉轴两端对齐，轴线之间的间隔平均分布。
//每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
//轴线占满整个交叉轴。（默认值）
}
свойства проекта
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
1. Атрибут заказа
Свойство order определяет порядок сортировки элементов. Чем меньше значение, тем выше рейтинг, по умолчанию 0.
.item {
order: <integer>;
}
2. свойство flex-grow (очень важно)
Свойство flex-grow определяет коэффициент увеличения элемента, по умолчанию 0, то есть если осталось место, он не будет увеличен.
Если все элементы имеют свойство flex-grow, равное 1, они будут делить оставшееся пространство (если оно есть) поровну. Если один элемент имеет свойство flex-grow, равное 2, а все остальные элементы равны 1, первый займет в два раза больше оставшегося места, чем другие элементы.
.item {
flex-grow: <number>; /* default 0 */
}
3. свойство flex-shrink
Свойство flex-shrink определяет коэффициент сжатия элемента, по умолчанию равен 1, то есть если места недостаточно, элемент сожмется.
Если свойство flex-shrink всех элементов равно 1, при недостатке места они будут пропорционально уменьшены. Если свойство flex-shrink одного элемента равно 0, а других элементов равно 1, первый не будет сжиматься при недостатке места.
Примечание. Отрицательные значения недопустимы для этого свойства.
.item {
flex-shrink: <number>; /* default 1 */
}
4. свойство flex-basis (это ключевой момент, часто используемый)
Свойство flex-basis определяет основной размер, который занимает элемент перед выделением лишнего пространства. На основе этого свойства браузер вычисляет, есть ли лишнее место на главной оси. Его значение по умолчанию — auto, что соответствует исходному размеру элемента.
Для него можно установить то же значение, что и для свойства ширины или высоты (например, 350 пикселей), и элемент будет занимать фиксированное пространство.
5. свойство flex (это самое важное)
Свойство flex является сокращением для flex-grow, flex-shrink и flex-basis со значением по умолчанию 0 1 auto. Последние два свойства являются необязательными.
.item {
//该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
//建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
свойство align-self
Свойство align-self позволяет одному элементу иметь выравнивание, отличное от других элементов, переопределяя свойство align-items. Значение по умолчанию — auto, что означает наследование свойства align-items родительского элемента.Если родительского элемента нет, это эквивалентно растягиванию.
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
//这个其实就是在项目里用align-items 注：auto为默认值
}
хорошо, статья г-на Жуана закончена (статья г-на Жуана настолько хороша, я не написал ее сам, когда был взволнован, спасибо)
реальный бой
Мы закончили копировать базовые вещи, поэтому нам нужно иметь что-то свое.Хватит нести чушь и начать настоящую битву.
1. Что означает обычно используемый flex 1?
упомянутый выше. flex — это аббревиатура от flex-grow, flex-shrink и flex-basis.Происхождение головокружения — 1. На самом деле у него есть следующие правила (mdn довольно сложно запомнить, пожалуйста, смотрите больших парней здесь) :
1. Когда значение flex равно нулю, расчетное значение равно 0 0 auto
//此处为预处理语法
div{
diaplay:flex
.div {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}
}
2. Когда значение flex равно auto, расчетное значение равно 1 1 auto.
//此处为预处理语法
div{
diaplay:flex
.div {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
}
3. Когда значение flex является неотрицательным числом, число flex-grow, flex-shrink равно 1, а flex-basis равно 0% (чаще всего используется).
//此处为预处理语法
div{
diaplay:flex
.div {
flex-grow: 1;//要取的值
flex-shrink: 1;//默认
flex-basis: 0%;//默认
}
}
4. Когда значение гибкости представляет собой длину или процент, оно рассматривается как значение гибкости, flex-grow равно 1, flex-shrink равно 1.
//此处为预处理语法
div{
diaplay:flex
.div {
flex-grow: 1;//默认
flex-shrink: 1;//默认
flex-basis: 0%;//要取得值
}
}
Когда значение flex равно двум неотрицательным числам, оно считается значением flex-grow и flex-shrink соответственно, а flex-basis равен 0%.
//此处为预处理语法
div{
diaplay:flex
.div {
flex-grow: 1;//要取的第一个值
flex-shrink: 1;//要取的第二个值
flex-basis: 0%;//默认
}
}
Когда значение flex является неотрицательным числом и длиной или процентом, оно рассматривается как значение flex-grow и flex-basis соответственно, а flex-shrink равно 1.
div{
diaplay:flex
.div {
flex-grow: 1;//要取的第一个值
flex-shrink: 1;//默认
flex-basis: 0%;//要取的第二个值
}
}
Как добиться равномерного разделения с помощью flex?
//css
.box{
height: 500px;
display: flex;
}
.box div{
height: 300px;
border: 1px solid #000000;
flex: 1;//这就是flex：1的妙用
text-align: center;
}
//html
div class="box">
<div>等分效果</div>
<div>等分效果</div>
</div>
Левый фиксированный, правый адаптивный
//css
.box {
height: 500px;
display: flex;
}
.box div {
height: 300px;
text-align: center;
}
.box div.right {
flex: 1;
border: 1px solid #000000;
}
.box div.left {
border: 1px solid #000000;
flex-basis: 100px;
}
//html
<div class="box">
<div class="left">左边固定效果</div>
<div class="right">右边自适应效果</div>
</div>
Выровняйте центр по вертикали и горизонтали
//css
.box {
width: 100%;
height: 300px;
border: 1px solid purple;
display: flex;
justify-content: center;
align-items: center;
}
//html
<div class="box"><p>看看剧中了吗</p>
</div>
С помощью трех вышеперечисленных базовых моделей мы можем расширить различные макеты.
1. Общее окно поиска
//css
.box {
width: 100%;
height: 50px;
border: 1px solid purple;
display: flex;
}
.input{
flex:1;
border:1px solid #000000
}
.bottom{
flex-basis: 60px;
line-height: 50px;
text-align: center;
font-size: 16px;
}
//html
<div class="box">
<div class="input"></div>
<div class="bottom">搜索</div>
</div>
2. Адаптивная компоновка панели навигации
//css
ul{
display: flex;
height: 50px;
list-style: none;
padding: 0;
}
li{
flex:1;
text-align: center;
}
.active{
border-bottom: 1px solid rebeccapurple;
}
//html
<ul>
<li class="active">好好学习</li>
<li>上学</li>
<li>天天向上</li>
</ul>
3. Общий макет списка левого изображения и правого текста
//css
.box {
display: flex;
width: 100%;
height: 150px;
}
.left {
flex-basis: 100px;
background: #000;
color: #ffffff;
}
.right {
flex: 1;
position: relative;
text-align: right;
}
.btn {
border: 1px solid rebeccapurple;
width: 100px;
display: inline-block;
overflow: hidden;
margin-top: 20px;
text-overflow: ellipsis;
white-space: nowrap;
}
//html，
<div class="box">
<div class="left">代表是个图</div>
<div class="right">
<p>这个个大大的标题，</p>
<span>下边的烂七八糟</span>
<div class="btn">搞个按钮让你点点</div>
</div>
</div>
Здесь есть яма.Если адаптивный контент справа превысит диапазон, то сформируются следующие эффекты.Решение тоже очень простое.В этом адаптивном месте достаточно цены min-width:0, но зачем? , и я не нашел его в официальной документации сейчас (если кто знает, дайте знать)
4. Макет сетки
Этот расклад немного ущербен, ситуаций будет неисчерпаемо, но он безобиден,
//css
ul {
width: 100%;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
list-style: none;
padding: 0;
}
li {
flex: 0 0 33.333333%;
height: 80px;
box-sizing: border-box;
border:1px solid #000
}
//html
<ul>
<li>
方框
</li>
<li>
方框
</li>
<li>
方框
</li>
<li>
方框
</li>
<li>
方框
</li>
<li>
方框
</li>
<li>
方框
</li>
</ul>
5, нижняя часть фиксированная, верхняя часть адаптивная
Некоторые люди скажут, что использование позиционирования для решения проблемы скоро закончится, есть еще один выбор, верно? Возможно, именно этот выбор удивляет интервьюера.
//css
.box {
display: flex;
flex-direction: column;
height: 100vh;
}
.header {
flex: 1;
}
.footer {
flex-basis: 100px;
background: red;
}
//html
<div class="box">
<div class="header">
这是头部，
</div>
<div class="footer">
这是底部
</div>
</div>
6. Компоновка Holy Grail, компоновка двойного летающего крыла
Этот тип макета на самом деле представляет собой два слоя гибкости с использованием flex-direction: column; на первом слое макета.
Суммировать
Воспользовавшись энтузиазмом в предыдущей статье, я обобщу некоторые гибкие макеты и закреплю метод написания, который я рекомендую для адаптации мобильного терминала. Для основной части узнайте у Жуань Ифэн:Уууу. Руан Ифэн.com/blog/2015/0…
Как человек, который был обеспокоен мобильным терминалом, неприятный вывод таков: я надеюсь, что в будущем всех не будет беспокоить макет мобильного терминала.
Адаптация мобильного терминала в последнем выпуске:Интервьюер: Вы знаете об адаптации мобильного терминала?