search

goldEli / Front-End-Training

Front End Training
2 stars 5 forks source link

CSS flex 属性 #5

Open goldEli opened 4 years ago

goldEli commented 4 years ago

谈谈你对 CSS 中 flex 属性的理解，并举例说明。

参考学习资料：

FireDragonZL commented 4 years ago

Flex的含义是“弹性布局”，主要是为了给传统的“盒状模型”布局方式提供最大的灵活性。其不仅可以为元素标签指定为Flex布局，同时也可以为元素内的行内元素提供布局支持。设为flex布局的元素成为容器，容器使用基于轴的方式进行内部元素的布局。其中，容器使用6种元素进行内部元素的布局，而内部元素也可以使用6个属性进行设置。

748580573 commented 4 years ago

Flex是css真正意义上的布局方式，它提供了布局的高度的灵活性，用户可以照着色子一样，对着容器的内从元素进行布局，可以为元素直接设置左右居中、上下居中、左右对齐，左对齐、右对齐等方式。Flex在布局上提供了严格的逻辑性，比之以往的float布局，可以说是有了真正的规范。

lurasso commented 4 years ago

flex是css中的一种布局方式，可以根据自己的喜好对网页进行布局，且布局之后的网页是弹性的，可以提高扩展性，也不用考虑盒子之间距离问题，提高开发的效率。使用flex之后传统子元素的float、clear、vertical-align就会失效。