dir.by  
  Search  
Programming, development, testing
→
Html & CSS
→
Что такое CSS flex
  Looked at 3302 times    
 Что такое CSS flex ? 
last updated: 10 March 2020
Посмотрим, как раньше верстали, создавали html страницы
1) Давным-давно html страницы делали в виде таблиц <table>
  Html  
<table>
     <tr>
          <td>
               ...
          </td>
     </tr>
</table>
2) Потом html страницы делали в виде <div> и использовали inline-block
  Html  
<div style='display:inline-block;'>
...
</div>
3) Сейчас html страницы делают в виде <div> и используют flex
  Html  
<div style='display:flex;'>
...
</div>
И так что такое CSS flex ?
CSS flex это свойство.

CSS flex для div пишется вот так:
  Html  
<div style='display:flex;'>
...
</div>


HTML элемент с flex может растягиваться или сжиматься и таким образом заполнять свободное пространство.

Люди при обсуждении часто говорят слово flex.
На самом деле полное название спецификации по flex вот так звучит CSS Flexible Box Layout Module или сокращщенно Flexbox.
Зачем использовать flex ?
1)
Все блоки очень легко делаются резиновым, что уже следует из названия flex. Элементы могут сжиматься и растягиваться по заданным правилам, занимая нужное пространство.
2)
Выравнивание по вертикали и горизонтали, базовой линии текста работает шикарно.
3)
Расположение элементов в html не имеет решающего значения. Его можно поменять в CSS. Это особенно важно для некоторых аспектов responsive верстки
4)
Элементы могут автоматически выстраиваться в несколько строк/столбцов, занимая все предоставленное место.
5)
Множество языков в мире используют написание справа налево rtl (right-to-left), в отличии от привычного нам ltr (left-to-right).

Flexbox адаптирован для изменения направления.

Во flexbox есть понятие начала и конца, а не права и лева.
В браузерах с локалью rtl все элементы будут автоматически расположены в реверсном порядке.
6)
Синтаксис CSS flex очень прост и осваивается довольно быстро.
Все свойства CSS flex
 
← Previous topic
Books to study CSS
 
Next topic →
Шапка в таблице всегда видна при скролинге | freeze header in table | HTML
 
Your feedback ... Comments ...
   
Your Name
Your comment (www links can only be added by a logged-in user)
  Объявления  
  Объявления  
 
HTML elements
• HTML tag <a> link to go to another page
• HTML tag <abbr> shows an abbreviated name, if you let the mouse down there will be a pop-up inscription
• HTML tags fieldset and legend. This is a frame with a title
• HTML tag <!-- --> comment
• style="border" in the HTML

HTML поиск элемента, элементов
• document.querySelector(...) это JavaScript метод для поиска элемента из document (то есть во всем HTML)
• yourElement.querySelectorAll(...) это JavaScript метод для поиска элементов внутри другого HTML элемента

HTML svg (vector graphics for drawing lines, rectangles, ellipses, ...)
• <svg> vector graphics, drawing a line<line>, rectangle <rect>, circle<circle>, text<text>

HTML canvas (drawing pictures, text, shapes)
• HTML <canvas> drawing a rectangle
• HTML <canvas> рисуем линии по нажатию мышкой на Canvas
• HTML <canvas> we draw pictures
• HTML <canvas> we draw a picture with a rotation
• HTML <canvas> draw a picture with horizontal reflection
• HTML <canvas> we draw a picture and text
• HTML <canvas> draw a picture many times in a rectangle (template)
• HTML <canvas> how to get mouse coordinates ? Determine the position of the mouse.
• HTML <canvas> drawing a snake with lines moveTo, lineTo
CSS
• CSS description
• After modifying the file css , the browser displays old styles over and over again. Why?
• Books to study CSS
CSS flex (элемент может растягиваться или сжиматься и таким образом заполнять свободное пространство)
• Что такое CSS flex
Freeze
• Шапка в таблице всегда видна при скролинге | freeze header in table | HTML
• Div всегда виден при скролинге (position:fixed, position:sticky) | freeze div | HTML
Do Popup using HTML and Javascript
• How to make a Popup window in a HTML page | Javascript, HTML, CSS
Motion and animation of pictures
• Анимация человечка на месте. Используем HTML элемент <div>. Для анимации используем CSS стили: "animation", "background-image", "background-position", "keyframes"
• Анимация человечка в движении (sprite). Используем HTML элементы <div>, <img>. Для анимации используем CSS стили: "animation", "background-image", "background-position", "keyframes"
• Рисуем картинку с движением. Используем HTML элемент <canvas>. Для движения используем JavaScript: var img = new Image(), img.src = url, drawImage, timer, window.setInterval
• Drawing a picture with movement and animation (sprite). Используем HTML элемент <canvas>. Для движения используем JavaScript: var img = new Image(), img.src = url, drawImage, timer, window.setInterval
Web страница на телефоне
• Открываю web страницу на телефоне в Google Chrome. Почему при двойном нажатии размер страницы увеличивается?
Верстка, дизайн страницы
• What the Front-end development?
• Как определить устройство (планшет, компьютер, телефон) сейчас используется в JavaScript, HTML
• Как сделать чтобы ваш сайт работал на телефоне, планшете, компьютере используем css media и max-device-width и min-device-width | HTML | CSS
• How to make your website fit in size on your phone, tablet? (HTML meta with attribute name='viewport')
• Correct layout HTML. Bad to use table. You need to use div
• Что такое Adaptive design (адаптивный дизайн)? Что такое Responsive design (отзывчивый дизайн) ?
• Меняем цвет scrollbar (полосы прокрутки) для HTML страницы. Используем CSS
WWW sites for learning
• Sites to explore HTML
  Ваши вопросы присылайте по почте: info@dir.by  
Яндекс.Метрика