其他分享
首页 > 其他分享> > 简单描述我对弹性盒子的理解及使用方法

简单描述我对弹性盒子的理解及使用方法

作者:互联网

一   .

   1 什么叫弹性盒子?

   2 弹性盒子的特点,优劣势?

   3 怎么去使用弹性盒子?

   4  flex弹性盒子的注意事项有哪些?

 

/*************************************************解答**********************************************/

       1. 弹性盒子也叫 Flexbox,是一种flex的布局效果,一般作用于手机端,在没有诞生flex之前一般都是用流式布局丶浮动布局丶定位布局等等...来“创造”页面,它最大的特点是有很大的布局分配能力。

       2.先说他的

优点:flex布局有很多自定义属性来完成分配空间的效果,并不需要计算,可以合理的分配空间,基本上新版的浏览器都能兼容。

缺点:假如元素在页面是多行多列时,布局效果会很不尽人如意,一般情况下还是多用于移动端开发,解决不了检查效果与分配空间。

       3. 弹性盒子的使用:在网页中我们把父级元素成为“容器”,它下面的第一层子元素成为“项目”,简单来说就是爸爸称为容器,他的子女称为项目,孙子或者再往后都不能再这么称呼了。如果想使用单行盒子就给需要使用的空间元素添加(给父级添加)  display:flex; 这时,此元素就成了flex的容器盒子,整个容器就能使用flex的相关属性了。

       4. flex的注意事项:① 子元素是依赖容器的元素,想要控制子元素的排序,依靠的是父级元素。 ② 设置父元素为弹性盒子,子元素的float将失效。 ③ 切记不要把flex与浮动布局或定位布局一起使用。 ④ 父级添加使用display:flex;子元素会块状化

二.

     1. 主轴的排列方向?

      2. 主轴的排序?

      3. 项目的换行?

      4. 主轴上的对齐方式?

      5. 交叉轴的对齐方式?

      6. 多行交叉轴的对其方式?

     /*************************************************解答**********************************************/

        1.主轴的排列方向:主轴分行模式 与 列模式两种,也就是水平与垂直,同时也就有了正反两个方向。

         

        2. 主轴的排序:默认的是行模式 既 从左到右,分为以下几种:

flex-direction:row;  默认值 行模式 正向排序

flex-direction:row-reverse;  默认值 行模式 反向排序

flex-direction:column;   默认值 列模式 正向排序

flex-direction:column-reverse;   默认值 列模式 反向排序

 

       3.  项目的换行:默认是强制不换行。

flex-wrap:nowrap; 强制不换行

flex-wrap:wrap; 强制换行

 

 

        4.  主轴上的对齐方式:

justify-content:定义项目在主轴上的对齐方式,注意需要区别行模式和列模式,在渲染之前,会先找到项目的排列方式在做渲染

justify-content: flex-start; 主轴起点对齐

justify-content: flex-end; 主轴终点对齐

justify-content: flex-center; 主轴居中

分配弹性元素的方式:

justify-content: space-between;主轴两端对齐,每行首个元素贴近容器起点,每行尾个元素贴近容器重点,其余剩余空间均分

justify-content: space-around; 均匀排列每个元素,每个元素周围分配相同的空间,如果遇到相邻元素,就成了两臂间隔

justify-content:space-evenly;每个项目元素之间的距离相等,均分所有空间

 

      5.  交叉轴的对齐方式:

align-items 指的是项目在交叉轴对齐方式,但是有前提,交叉轴方向上要有富裕的空间

height: 300px;

align-items: flex-start;  /*交叉轴起点对齐*/

align-items: flex-end;   /*交叉轴终点对齐*/

align-items: center;      /*交叉轴居中对齐*/

 

     6.多行交叉轴的对齐方式:

  多行显示前提:有换行,并且在交叉轴方向上有空余空间

align-content: flex-start;/* 3. 交叉轴起点对齐 */

align-content: flex-end;/* 3.1  交叉轴终点对齐 */

align-content: center;/* 3. 交叉轴居中 */

align-content: space-between;/* 3. 交叉轴两端对齐 */

align-content: space-around;/* 3. 交叉轴环绕对齐,首尾一臂距离,相邻元素两臂距离 */

align-content: space-evenly;/* 3.交叉轴上每行元素之间距离相等,所有剩余空间距离相等 */

 

标签:flex,盒子,交叉,align,元素,弹性,content,对齐,描述
来源: https://www.cnblogs.com/wwwxxx/p/16499745.html