标签：flex 盒子 交叉 align 元素 弹性 content 对齐 描述

一   .

   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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。