Свойство box-flex - это настоящий секретный ингредиент для создания динамичных интерфейсов. Оно позволяет точно определить, смогут ли дочерние элементы внутри блока «подыграть» изменениям размера контейнера или останутся неподвижными. Представьте гибкие элементы как умные спонжи: при изменении ширины или высоты родительского блока они мгновенно адаптируются, расширяясь или сжимаясь. Как только в блоке появляется свободное пространство, эти элементы с удовольствием заполняют его, обеспечивая идеально выверенную композицию без лишних усилий разработчика. | Значение по умолчанию: | 0.0 (указывает, что элемент не гибкий) | | Наследуется: | нет | | Версия: | CSS3 | | Синтаксис JavaScript: | object.style.boxFlex=2.0 | | Значение | Описание | | значение | Эластичность элемента. Вся эластичность относительна, например дочерний элемент с box-flex: 2 в два раза более эластичный, чем дочерний элемент с box-flex: 1. | Пример html head style type="text/css" div { display: -moz-box; /* Firefox */ display: -webkit-box; /* Safari, Chrome */ display: box; width: 300px; border: 1px solid black; } #p1 { -moz-box-flex: 1.0; /* Firefox */ -webkit-box-flex: 1.0; /* Safari, Chrome */ box-flex: 1.0; border: 1px solid red; } #p2 { -moz-box-flex: 2.0; /* Firefox */ -webkit-box-flex: 2.0; /* Safari, Chrome */ box-flex: 2.0; border: 1px solid blue; } /style /head body div p id="p1"Привет/p p id="p2"puzzleweb.ru/p /div /body /html
|