CSS гибкий

CSS

CSS flex

Предисловие:

年前公司招进来一个高级前端，最近闲谈中聊到了他之前找工作面试时的情况。        
在对大佬油然起敬的同时，深感自己的不足。便产生了再次写博客的想法。
写博文一方面巩固以前的知识，另一方面记录和督促学习新的知识内容。

1. Знакомство с флексом

flex — это сокращение от flexible, что означает гибкую компоновку, которая используется для обеспечения максимальной гибкости блочной модели.
Для гибкой компоновки можно указать любой контейнер (включая встроенные элементы):

div { display: flex}

После того, как элемент установит свойство flex, его выравнивание по вертикали с плавающей запятой будет недействительным.

2. Сравнение гибкого макета и обычного макета

  • Генеральный план:

    • Элементы блочного уровня располагаются сверху вниз.
    • Элемент имеет только высоту, когда нет ширины, ширина по умолчанию равна 100%.
    • Элемент имеет только ширину, если нет высоты, высота равна 0

  • гибкий макет

    • Элементы в контейнере по умолчанию располагаются слева направо.
    • Элемент имеет только высоту, если ширины нет, ширина равна 0
    • Когда элемент имеет только ширину и не имеет высоты, высота по умолчанию равна 100%.

Элемент, который становится flex-контейнером, по умолчанию имеет две оси: горизонтальную главную ось (основную ось) и вертикальную поперечную ось (поперечную ось). Пространство главной оси, занимаемое одним элементом, называется основным размером, а поперечная ось — размер креста.Следующее изображение очень хорошо объяснено:

3. гибкое свойство

  • flex-direction изменяет направление главной оси, по умолчанию используется горизонтальное расположение строк. Свойства включают строку | реверс строки | столбец | реверс столбца
  • flex-wrap управляет обтеканием элементов. Свойства включают nowrap | wrap | wrap-reverse
  • align-content управляет выравниванием нескольких осей. Это свойство не действует, если элемент имеет только одну ось. Свойства включают flex-start | flex-end | center | space-between | space-around | stretch
  • justify-content управляет выравниванием по главной оси. Свойства включают flex-start | flex-end | center | space-between | space-around
  • align-items контролирует, как выравнивать по поперечной оси. Включенные свойства: flex-start | flex-end | center | исходный | растянуть
  • Свойство align-self позволяет одному элементу иметь выравнивание, отличное от других элементов. Включенные свойства auto | flex-start | flex-end | center | baseline | stretch
  • Атрибут order управляет порядком расположения элементов, чем меньше значение, тем выше расположение.
  • Свойство flex-grow определяет коэффициент увеличения элемента, по умолчанию 0, то есть если осталось место, он не будет увеличен.
  • Свойство flex-shrink определяет коэффициент сжатия элемента, по умолчанию равен 1, то есть если места недостаточно, элемент сожмется.
  • Свойство flex-basis определяет пространство, которое элемент занимает на главной оси.По умолчанию используется значение auto , которое является исходным размером элемента.
  • Свойство flex является сокращением для flex-grow, flex-shrink и flex-basis со значением по умолчанию 0 1 auto.

Вы можете использовать flex, чтобы реализовать расположение сита, а также использовать свойства flex.

4. Применение флекса

  • Центрированное расположение может быть достигнуто с помощью flex
<style>
/* 使用 flex 进行布局 */
.wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    width: 100%;
    border-bottom: 1px solid black;
}
.box {
    height: 200px;
    width: 200px;
    background: red;
}

</style>

<body>

<div class="wrap">
    <div class="box"></div>
</div>

</body>
  • Используйте flex для создания простого гибкого масштабируемого макета.

<style>
* {
    margin: 0;
    padding: 0;
}
body, html {
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
}
header {
    flex: 0 0 100px;
    background: #cecece;
}
.content {
    flex: 1;
    background: yellow;
    display: flex;
}
aside {
    background: pink;
    flex: 0 1 25%;
}
section {
    flex: 1;
}
footer {
    flex-basis: 70px;
    background: red;
}
</style>    
</head>
<body>
<header>
    header
</header>
<div class="content">
    <aside></aside>
    <section></section>
</div>
<footer>
    footer
</footer>
</body>

Быстрее и удобнее использовать flex, чем float, но его совместимость с младшими версиями IE не очень хорошая. В случае требований IE рекомендуется использовать плавающую компоновку.

Категории