浅谈“display:flex”属性(弹性盒子or弹性布局)——(逆战班)

假如想象 提交于 2020-02-29 14:40:17

一、flex简要概念

     display:flex 是一种布局方式。它即可以应用于容器中,也可以应用于行内元素。是W3C提出的一种新的方案,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。

     Flex 布局的主要思想是使父容器能够调节子元素的宽度/高度(和排列顺序),从而能够最好地填充可用空间(主要是为了适应所有类型的显示设备和屏幕尺寸)。flex布容器能够放大子元素使之尽可能填充可用空间,也可以收缩子元素使之不溢出

二、display:flex 在父项添加的属性值

          flex-direction:布局的排列方向 (主轴排列方向)
          row 默认值,显示为行。方向为当前文档水平流方向,默认情况下是从左往右。(1 2 3 4)

          row-reverse 显示为行。但方向和row属性值是反的(4 3 2 1)

 

 

          column 显示为列
          column-reverse 显示为列。但方向和column属性值是反的

 

 

           flex-wrap :  是否进行换行处理。
           nowrap; 默认值,不换行处理
           wrap; 换行处理
           wrap-reverse; 反向换行

 

               justify-content ; 属性 决定了主轴方向上子项的对齐和分布方式。
               flex-start : 子项都去起始位置对齐。(默认值)
               flex-end : 子项都去结束位置对齐。

 

 

 


               center : 子项都去中心位置对齐。

 

 

 


               space-between : 表现为两端对齐。between是中间的意思,意思是多余的空白间距只在元素中间区域分配。

 

 

 


               space-around : around是环绕的意思,意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距,最终视觉上边缘两侧的空白只有中间空白宽度一半。

 

 

 


               space-evenly : evenly是匀称、平等的意思。也就是视觉上,每个flex子项两侧空白间距完全相等。

 

 

 


               align-items : 每一行中的子元素上下对齐方式。
               flex-start; 默认值
               center; 子项在垂直方向的中间位置对齐

 

 

               flex-end; 子项在垂直方向底端的位置对齐

 

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!