flex

最新推荐文章于 2024-11-16 17:16:31 发布

weixin_30387423

最新推荐文章于 2024-11-16 17:16:31 发布

阅读量55

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gyz418/p/6510418.html

本文详细介绍了Flex布局的基础概念和属性设置，包括容器与项目的定义、方向调整、对齐方式等，并通过实例展示了如何实现不同场景下的布局效果。

flex

flex ul【容器】  li【项目】

flex-direction: row 水平排列   row column  row-reverse || column-reverse;

flex-wrap:nowrap 不换行 

flex-flow: 是上面的简称

justify-content: flex-start 水平左对齐  flex-start || flex-end || center || space-between【两端对齐】 || space-around 【div居中】

align-items: stretch 垂直对齐 让项目li高度跟容器ul高度一样  flex-start || flex-end || center || stretch || baseline

align-content: stretch 多行排列  flex-start || flex-end || center || stretch


=============
li【项目】
order:0 排序 从小到大排列  li:nth-of-type(1) {order:1} 则排后面
flex-grow: 0 对剩余空间进行放大 取值0是表示关闭属性  0或正数 positive number  
flex-shrink:1 对剩余空间进行缩小 取值0是表示关闭属性  0或正数 positive number  
flex-basis:auto   指定项目li初始大小  可以取任何用于width属性的任何值。比如 % || em || rem || px
                  默认，li由flex-basis默认值auto决定，由li内容决定 
                  
flex: 0 1 auto 是上面的简称 GSB
设置了 flex-basis,就是相对flex项目 【内容】

li{flex:1 1;} //  则 flex-basis默认值为0 == 绝对flex项目【属性】

flex: 0 0 auto;  == flex：none;  不会放大，不会缩小,宽度由内容决定 
flex:1 1 auto;  == flex:auto;   根据浏览器放大缩小，
flex: "positive number" 任何正数

flex:2 1 0 ==> flex：2； // 2 表示任何正数 
当第3个参数为0时，由flex-grow 决定项目li的宽度，第二个参数为1 是 flex-shrink的默认参数也可以省略
如果 li:nth-of-type(1){flex:2} li{nth-of-type(2){flex:1} 则两个li的宽度比例为2：1 

align-self: 垂直对齐 li也有这个属性，可以个别设置对齐方式 auto || flex-start || flex-end || center || baseline || stretch

【应用】
当在Flex项目上使用 margin: auto 时，值为 auto 的方向（左、右或者二者都是）会占据所有剩余空间。【暂时记住就好】
margin-right:auto;

li{flex:none;}
li:nth-of-type(1){margin-right:auto;}  // 则第一个会占据右边空余空间

flex 例子 flex-direction:column

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<style>
  body, div, ul, li {
    margin: 0;
    padding: 0;
  }
  ul{
    display: flex;
    border: 1px solid #00aaff;
    height: 600px;
    flex-direction: column;  /* 水平和垂直调换位置 */
    align-items: center;    /* 垂直的对齐方式变成 水平的居中 */
  }
  li{
    list-style: none;
    background: #718c00;
    margin: 20px;
    width: 300px;         /* 手动设置宽度 */
    flex-basis: 100px;   /* 水平的宽度 变成 li的高度*/
  }
</style>
<ul>
  <li> 使用 flex-direction:column 水平和垂直调换位置了 </li>
  <li>  1111111111111111111111 </li>
  <li>  aaaaaaaaaaaaaaaaaaaaaa </li>
</ul>
</body>
</html>