Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex弹性盒子
Blogger Information
Blog 18
fans 0
comment 0
visits 16001
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
flex弹性盒子
沉寂的博客
Original
619 people have browsed it

flex弹性盒子

弹性盒布局,这是第一个针对布局的技术,之前是table,div,css,position,float都是布局元素，在flex眼中,所有元素都是: 行内块,flex,页面存在二个布局的参考轴,一个叫主轴(元素的排列),还有一个交叉轴,控制元素的换行方向flex实现快速水平方向和垂直方向居中，代码如下：
justify-content:center;
align-items:center;

  弹性盒子的容器属性

  容器属性主要有
1.这也是容器盒子的默认属性沿着主轴排列不换行 flex-flow：row nowrap；,
如果想要垂直方向排列flex-flow:column wrap;;
2.容器盒子排列对齐方式方案有两种：
1）主轴上的对齐方式justify-content：第一种分配方案（将项目是我一个整体）的值： flex-start/flex-end/center靠右对齐，靠左对齐，居中对齐；
2）第二种分配方案（将项目是为一个独立的个体）的值：justify-content:space-between/space-around/space-evenly两端对齐，分散对齐，平均对齐；
3.交叉轴上的对齐方式align-items：stretch/flex-start/flex-end/center
拉伸对齐，上对齐，下对齐，居中对齐。

  1. .container {
  2.         height: 30em;
  3.         border: solid 1px black;
  4.         background-color: #ccc;
  5.         /* 转为flex弹性布局元素 */
  6.         display: flex;
  7.         /* flex-flow: column wrap; */
  8.         flex-flow: row wrap;
  9.         /* justify-content: flex-start; */
  10.         /* justify-content: flex-end; */
  11.         justify-content: center;
  12.         /* justify-content: space-between; */
  13.         /* justify-content: space-around; */
  14.         /* justify-content: space-evenly; */
  15.         /* align-items: stretch; */
  16.         /* align-items: center; */
  17.         /* align-items: flex-end; */
  18.         /* align-items: flex-start; */
  19.         /* 多行容器交叉轴上的对齐方式 */
  20.         /* align-content: flex-start; */
  21.         /* align-content: center; */
  22.         /* align-content: stretch; */
  23.         align-content: space-between;
  24.         /* align-content:space-evenly; */
  25.       }
  26.       .container .item {
  27.         height: 10em;
  28.         width: 20em;
  29.         background-color: lightcoral;
  30.         border: 1px solid black;
  31.       }
  1. <body>
  2.     <div class="container">
  3.       <div class="item">item1</div>
  4.       <div class="item">item2</div>
  5.       <div class="item">item3</div>
  6.       <div class="item">item4</div>
  7.       <div class="item">item5</div>
  8.       <div class="item">item6</div>
  9.       <div class="item">item7</div>
  10.       <div class="item">item8</div>
  11.       <div class="item">item9</div>
  12.       <div class="item">item10</div>
  13.     </div>
  14.   </body>

执行结果为：
flex容器排列方式属性

flex项目属性

  项目属性flex，flex: 放大因子 收缩因子 项目在主轴上的基准宽度，默认上不会放到或收缩 ；

  写一个案例，要求第二个和第三个项目的宽度是第一个和第四个的2倍，代码如下：

  1.  .container .item:first-of-type,
  2.       .container .item:last-of-type {
  3.         flex: 0.5;
  4.         align-self: center;
  5.       }
  6.       .container .item:nth-of-type(2),
  7.       .container .item:nth-of-type(3) {
  8.         flex: 1;
  9.         align-self: center;
  10.       }
  1. <div class="container">
  2.       <div class="item">item1</div>
  3.       <div class="item">item2</div>
  4.       <div class="item">item3</div>
  5.       <div class="item">item4</div>
  6.     </div>

执行结果：
项目属性flex

项目在容器中的位置

改变项目的位置属性 order：（-整数-正整数）值越小越靠前，越大越靠后。
列如：

  1. .container .item:last-of-type {
  2.         order: -1;
  3.       }
  1. <div class="container">
  2.       <div class="item">item1</div>
  3.       <div class="item">item2</div>
  4.       <div class="item">item3</div>
  5.       <div class="item">item4</div>
  6.     </div>

执行结果：
项目位置

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post