search

博客列表 >Flex项目属性

Flex项目属性

王佳祥
王佳祥原创
2020年06月25日 14:16:471169浏览

Flex项目属性

一、Flex父元素属性

1. display

  1. 用来定义一个 flex 容器。如果设置为 flex 则容器呈现为块状元素，设置为inline-    flex 则容器呈现为行内元素。

CSS 代码:

  1.     .container {
  2.       display: flex; /* or inline-flex */
  3.     }

2. flex-direction

  1. flex-direction 属性确立了主轴，从而定义了 flex 项在 flex 容器中的排布方向。 Flexbox 是单向布局，有些时候我们也称作一维布局。 可以将 flex 项视为主要沿着水平行或垂直列排布。

CSS 代码:

  1.     .container {
  2.       flex-direction: row | row-reverse | column | column-reverse;
  3.     }

3. flex-wrap

  1. 默认情况下，flex 项会尽可能地尝试排在同一行上（行或列），通过设置 flex-wrap 来决定 flex 项是否允需要换行。

CSS 代码:

  1.     .container{
  2.       flex-wrap: nowrap | wrap | wrap-reverse;
  3.     }
  1. nowrap (默认值) : 不换行
  2. wrap: 换行
  3. wrap-reverse: flex 项将 从下到上 根据实际情况排布再多行上折行。

4. flex-flow

  1. 这是 flex-direction 和 flex-wrap 属性的缩写形式。同时定义 flex 容器的主轴和交叉轴。默认是 row nowrap

CSS 代码:

  1. flex-flow: <‘flex-direction’> || <‘flex-wrap’>

5. justify-content

  1. justify-content 属性定义了flex 项沿主轴方向的对齐方式。

CSS 代码:

  1. .container {
  2.   justify-content: flex-start | flex-end | center | space-between | space-around;
  3. }

  1.     flex-start（默认值）：左对齐
  2.     flex-end：右对齐
  3.     center： 居中
  4.     space-between：两端对齐，项目之间的间隔都相等。
  5.     space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

6. align-items

  1. align-items 定义了 flex 项如何沿当前行在交叉轴上排布的默认行为。可以将其视为交叉轴（垂直于主轴）上的对齐方式。

CSS 代码:

  1. .container {
  2.   align-items: flex-start | flex-end | center | baseline | stretch;
  3. }

  1.     flex-start：交叉轴的起点对齐。
  2.     flex-end：交叉轴的终点对齐。
  3.     center：交叉轴的中点对齐。
  4.     baseline: 项目的第一行文字的基线对齐。
  5.     stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

7.align-content

  1. 当交叉轴上有剩余空间时，align-content 可以设置 flex 容器中的 行 在交叉轴上如何分配剩余空间，类似于 justify-content 在主轴上对齐单个 flex 项的方式。

CSS 代码:

  1. .container {
  2.   align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  3. }

  1.     flex-start：与交叉轴的起点对齐。
  2.     flex-end：与交叉轴的终点对齐。
  3.     center：与交叉轴的中点对齐。
  4.     space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  5.     space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  6.     stretch（默认值）：轴线占满整个交叉轴。

二、flex 项目属性

1. order

  1. 默认情况下，flex 项按源（HTML结构）顺序排布。但是，order 属性可以控制它们在 flex 容器中的显示顺序。

CSS 代码:

  1. .item {
  2.   order: <integer>;  /* 默认值是 0 */
  3. }

  1. order值越小排列越靠前

2. flex-grow（放大因子）

  1. flex-grow 定义了 flex 项在有可用剩余空间时拉伸比例。
  2. 它接受的值作为比例，无单位。它规定了 flex 项应该占 flex 容器中可用空间的比例。
  3. 如果所有 flex 项的 flex-grow 都设置为 1 ，则父容器中的剩余空间将平均分配给所有子项。 如果其中一个子项的值为 2 ，则该子项占用的剩余空间是其他子项的两倍（或者至少会尽力获得）。

CSS 代码:

  1. .item {
  2.   flex-grow: <number>; /* default 0 */
  3. }

注：负值对于 flex-grow 无效。

比如我们得 flex 容器中有 6 个 flex 项，每个 flex 项的 flex-grow 初始值都是 1。如果我们将每个 flex 项的 flex-grow 相加起来，总和为 6。因此 flex 容器的总宽度被平均分成了 6 份。每个 flex 项增长到填充容器可用空间的1/6。

当我们将第 3 个 flex 项的 flex-grow 设置为 2 时，flex 容器现在被分成了 7 等份，因为所有 flex-grow 属性是：1 + 1 + 2 + 1 + 1 + 1。第 3 个 flex 项占了整个容器空间的 2/7，其他的占了 1/7。

3. flex-shrink（缩小因子）

  1. flex-shrink 定义了 flex 项的收缩的能力。（注：与 flex-grow 拉伸正好相反，flex-shrink 决定 flex 项允许收缩多少比例。）

CSS 代码:

  1. .item {
  2.   flex-shrink: <number>; /* default 1 */
  3. }

注：负值对于 flex-shrink 无效。

4. flex-basis

  1. flex-basis 定义了在分配剩余空间之前 flex 项默认的大小。可以设置为某个长度值（e.g. 20%, 5rem,等）或者关键字。关键字 auto 意味着 flex 项会按照其本来的大小显示

CSS 代码:

  1. .item {
  2.   flex-basis: <length> | auto; /* default auto */
  3. }

如果设置为 0 , 则 flex 项内容周围的空隙不会根据 flex-grow 按比例分配，如果设置为 auto，则 flex 项周围额外的空袭会根据 flex-grow 按照比例分配

5. flex

  1. flex 是 flex-grow、flex-shrink、flex-basis 三个属性的缩写。其中第二个和第三个参数(flex-shrink 和 flex-basis)是可选的。默认值为0 1 auto。

CSS 代码:

  1. .item {
  2.   flex: none | [ < 'flex-grow'> < 'flex-shrink'>? || < 'flex-basis'> ]
  3. }

推荐使用缩写形式而不是单独地设置每一个属性，缩写形式中会更加智能地计算出相关值。

6. align-self

  1. align-self 属性允许某个单独的 flex 项覆盖默认的对齐方式

CSS 代码:

  1. .item {
  2.   align-self: auto | flex-start | flex-end | center | baseline | stretch;
  3. }

三、FlexPC端布局

  • 代码：
  1. title>PC端布局的通用解决方案</title>
  2.     <style>
  3.       /*初始化*/
  4.       * {
  5.         font-size: 16px;
  6.         padding: 0;
  7.         margin: 0;
  8.         box-sizing: border-box; /*不加内边距和边框的宽度，默认是content-box*/
  9.       }
  10.       body {
  11.         display: flex;
  12.         flex-flow: column nowrap; /*从上到下排列，不换行*/
  13.       }
  14.       nav {
  15.         display: flex;
  16.         justify-content: start;
  17.         align-items: center;
  18.         min-width: 80px;
  19.         background: #000;
  20.       }
  21.       nav > a:not(:first-of-type) {
  22.         width: 150px;
  23.         text-align: center;
  24.         color: #fff;
  25.         text-decoration: none;
  26.         height: 50px;
  27.         line-height: 50px;
  28.         margin-left: 40px;
  29.       }
  30.       nav > a:not(:first-of-type):hover {
  31.         background: rgba(87, 87, 87, 0.5);
  32.         color: rgb(241, 79, 79);
  33.       }
  34.       nav > a:last-of-type {
  35.         margin-left: auto;
  36.       }
  37.       nav > a > img {
  38.         height: 50px;
  39.       }
  40.       .container {
  41.         display: flex;
  42.         flex-flow: row nowrap;
  43.         justify-content: center;
  44.         align-items: center;
  45.         margin: 10px auto;
  46.       }
  47.       aside {
  48.         min-width: 200px;
  49.         min-height: 600px;
  50.         background: lightgoldenrodyellow;
  51.       }
  52.       main {
  53.         min-width: 600px;
  54.         min-height: 600px;
  55.         margin: 0 10px;
  56.         background: lightblue;
  57.       }
  58.       footer {
  59.         display: flex;
  60.         height: 80px;
  61.         background: #000;
  62.         justify-content: center;
  63.         align-items: center;
  64.         flex-flow: column nowrap;
  65.       }
  66.       footer > div {
  67.         display: flex;
  68.         justify-content: center;
  69.       }
  70.       footer > div:first-of-type a {
  71.         width: 100px;
  72.         font-size: 14px;
  73.         height: 20px;
  74.       }
  75.       a {
  76.         text-decoration: none;
  77.         color: rgb(184, 184, 184);
  78.       }
  79.       footer > div:last-of-type {
  80.         margin-top: 10px;
  81.         color: rgb(184, 184, 184);
  82.       }
  83.       footer > div:last-of-type span {
  84.         font-size: 14px;
  85.         margin: 0 20px;
  86.       }
  87.     </style>
  88.   </head>
  89.   <body>
  90.     <!-- 页眉 -->
  91.     <header>
  92.       <nav>
  93.         <a href=""><img src="logo.png" alt="" /></a>
  94.         <a href="">首页</a>
  95.         <a href="">电器城</a>
  96.         <a href="">医药馆</a>
  97.         <a href="">营业厅</a>
  98.         <a href="">登录/注册</a>
  99.       </nav>
  100.     </header>
  101.     <!-- 主体 -->
  102.     <div class="container">
  103.       <aside>左边栏</aside>
  104.       <main>主体内容</main>
  105.       <aside>右边栏</aside>
  106.     </div>
  107.     <!-- 页脚 -->
  108.     <footer>
  109.       <div>
  110.         <a href="">关于天猫</a>
  111.         <a href="">帮助中心</a>
  112.         <a href="">开放平台</a>
  113.         <a href="">诚聘英才</a>
  114.         <a href="">联系我们</a>
  115.         <a href="">网站合作</a>
  116.         <a href="">法律声明</a>
  117.         <a href="">隐私权政策</a>
  118.         <a href="">知识产权</a>
  119.         <a href="">廉正举报</a>
  120.         <a href="">规则意见征集</a>
  121.       </div>
  123.       <div>
  124.         <span>浙江省网络食品销售第三方平台提供者备案：浙网食A33010002</span>
  125.         <span> 互联网药品交易服务资格证书：国A20150001</span>
  126.       </div>
  127.     </footer>
  128.   </body>
  129. </html>
  • 预览：

四、Flex移动端布局

  • 代码：
  1. <title>移动端布局</title>
  2.     <style>
  3.       * {
  4.         margin: 0;
  5.         padding: 0;
  6.         box-sizing: border-box;
  7.       }
  8.       a {
  9.         text-decoration: none;
  10.         color: #666;
  11.       }
  12.       html {
  13.         width: 100vw; /*当前可视区的宽度*/
  14.         /* vh:可视区的高度 */
  15.         height: 100vh;
  16.         font-size: 14px;
  17.         color: #666;
  18.       }
  19.       body {
  20.         min-width: 360px;
  21.         background: #fff;
  22.         display: flex;
  23.         flex-flow: column nowrap;
  24.       }
  25.       body > header {
  26.         color: #fff;
  27.         background: #333;
  28.         height: 30px;
  29.         display: flex;
  30.         align-items: center;
  31.         justify-content: space-between;
  32.         position: fixed;
  33.         width: 100vw;
  34.         padding: 0 15px;
  35.       }
  36.       /*轮播图*/
  37.       body > .slider {
  38.         height: 180px;
  39.       }
  40.       body > .slider > img {
  41.         width: 100%;
  42.       }
  43.       /*导航区*/
  44.       nav {
  45.         height: 200px;
  46.         margin-bottom: 10px;
  47.         display: flex;
  48.         /*转为多行容器*/
  49.         flex-flow: row wrap;
  50.       }
  51.       nav div {
  52.         width: 25vw;
  53.         display: flex;
  54.         flex-flow: column nowrap;
  55.         align-items: center;
  56.       }
  57.       nav > div > a:first-of-type {
  58.         text-align: center;
  59.       }
  60.       nav > div img {
  61.         width: 50%;
  62.       }
  63.       /* 热销商品 */
  64.       .hot-goods {
  65.         display: flex;
  66.         flex-flow: row wrap;
  67.         justify-content: space-around;
  68.         margin: 10vw 0;
  69.       }
  70.       .hot-goods > .goods-img {
  71.         display: flex;
  72.         flex-flow: column nowrap;
  73.         justify-content: center;
  74.         align-items: center;
  75.       }
  76.       .hot-goods .hot {
  77.         color: coral;
  78.       }
  79.       /* 商品列表 */
  80.       .shop {
  81.         display: flex;
  82.         flex-flow: column nowrap;
  83.         margin-top: 10vw;
  84.         font-size: small;
  85.       }
  86.       .shop > .goods-desc {
  87.         display: flex;
  88.         margin-bottom: 10vw;
  89.       }
  90.       .shop > .goods-desc img {
  91.         width: 20vw;
  92.       }
  93.       .shop > .goods-desc > a:first-of-type {
  94.         margin-left: 5vw;
  95.       }
  96.       .shop > .goods-desc > a:last-of-type {
  97.         margin: 0 10vw;
  98.       }
  99.       .shop > .goods-desc .hot {
  100.         color: coral;
  101.       }
  102.       footer {
  103.         display: flex;
  104.         justify-content: space-around;
  105.         height: 10vw;
  106.         background: rgb(231, 231, 231);
  107.         position: fixed;
  108.         bottom: 0;
  109.         width: 100vw;
  110.       }
  111.       footer > a {
  112.         display: flex;
  113.         flex-flow: column nowrap;
  114.         justify-content: center;
  115.         text-align: center;
  116.       }
  117.       footer > a > span:first-of-type {
  118.         color: coral;
  119.       }
  120.       footer > a > span:last-of-type {
  121.         color: #333;
  122.       }
  123.     </style>
  124.   </head>
  125.   <body>
  126.     <!-- 页眉 -->
  127.     <header>
  128.       <a href="">LOGO</a>
  129.       <span class="iconfont">&#xe61f;</span>
  130.     </header>
  132.     <!-- 轮播图 -->
  133.     <div class="slider">
  134.       <img src="static/images/banner.jpg" alt="" />
  135.     </div>
  137.     <!-- 主导航区 -->
  138.     <nav>
  139.       <div>
  140.         <a href=""><img src="static/images/link4.webp" alt="" /></a>
  141.         <a href="">优惠劵</a>
  142.       </div>
  143.       <div>
  144.         <a href=""><img src="static/images/link1.webp" alt="" /></a>
  145.         <a href="">超市精选</a>
  146.       </div>
  147.       <div>
  148.         <a href=""><img src="static/images/link2.webp" alt="" /></a>
  149.         <a href="">服装百货</a>
  150.       </div>
  151.       <div>
  152.         <a href=""><img src="static/images/link3.webp" alt="" /></a>
  153.         <a href="">数码精品</a>
  154.       </div>
  155.       <div>
  156.         <a href=""><img src="static/images/link4.webp" alt="" /></a>
  157.         <a href="">优惠劵</a>
  158.       </div>
  159.       <div>
  160.         <a href=""><img src="static/images/link1.webp" alt="" /></a>
  161.         <a href="">超市精选</a>
  162.       </div>
  163.       <div>
  164.         <a href=""><img src="static/images/link2.webp" alt="" /></a>
  165.         <a href="">服装百货</a>
  166.       </div>
  167.       <div>
  168.         <a href=""><img src="static/images/link3.webp" alt="" /></a>
  169.         <a href="">数码精品</a>
  170.       </div>
  171.     </nav>
  173.     <!-- 热销商品 -->
  174.     <h2>
  175.       热销商品<span class="iconfont hot" style="color: red;">&#xe60b;</span>
  176.     </h2>
  178.     <div class="hot-goods">
  179.       <div class="goods-img">
  180.         <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
  181.         <p>Apple iPhone 11 128g</p>
  182.         <div>
  183.           <span>6299&nbsp;元</span>
  184.           <span class="iconfont hot">&#xe602;</span>
  185.         </div>
  186.       </div>
  188.       <div class="goods-img">
  189.         <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
  190.         <p>华为笔记本电脑</p>
  191.         <div>
  192.           <span>8999&nbsp;元</span>
  193.           <span class="iconfont hot">&#xe602;</span>
  194.         </div>
  195.       </div>
  197.       <div class="goods-img">
  198.         <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
  199.         <p>Apple iPhone 11 128g</p>
  200.         <div>
  201.           <span>6299&nbsp;元</span>
  202.           <span class="iconfont hot">&#xe602;</span>
  203.         </div>
  204.       </div>
  206.       <div class="goods-img">
  207.         <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
  208.         <p>华为笔记本电脑</p>
  209.         <div>
  210.           <span>8999&nbsp;元</span>
  211.           <span class="iconfont hot">&#xe602;</span>
  212.         </div>
  213.       </div>
  215.       <div class="goods-img">
  216.         <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
  217.         <p>Apple iPhone 11 128g</p>
  218.         <div>
  219.           <span>6299&nbsp;元</span>
  220.           <span class="iconfont hot">&#xe602;</span>
  221.         </div>
  222.       </div>
  224.       <div class="goods-img">
  225.         <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
  226.         <p>华为笔记本电脑</p>
  227.         <div>
  228.           <span>8999&nbsp;元</span>
  229.           <span class="iconfont hot">&#xe602;</span>
  230.         </div>
  231.       </div>
  232.     </div>
  233.     <!-- 商品列表 -->
  234.     <h2>
  235.       商品列表<span class="iconfont hot" style="color: red;">&#xe64b;</span>
  236.     </h2>
  238.     <div class="shop">
  239.       <div class="goods-desc">
  240.         <a href=""><img src="static/images/p40.png" alt="" /></a>
  241.         <a href=""
  242.           >领劵200【12期免息+当天发】HUAWEI/华为P40
  243.           5G手机官方旗舰店官网正品华为mate30pro/直降nova7se/p40pro+
  244.           <span class="iconfont hot" style="vertical-align: middle;"
  245.             >&#xe675;</span
  246.           ></a
  247.         >
  248.       </div>
  250.       <div class="goods-desc">
  251.         <a href=""><img src="static/images/i7.png" alt="" /></a>
  252.         <a href=""
  253.           >华为/HUAWEI&nbsp;MateBook&nbsp;X&nbsp;Pro2020款英特尔十代i7-10510U+16GB+512GB/1TBSSD独显笔记本
  254.           <span class="iconfont hot" style="vertical-align: middle;"
  255.             >&#xe675;</span
  256.           >
  257.         </a>
  258.       </div>
  259.       <div class="goods-desc">
  260.         <a href=""><img src="static/images/p40.png" alt="" /></a>
  261.         <a href=""
  262.           >领劵200【12期免息+当天发】HUAWEI/华为P40
  263.           5G手机官方旗舰店官网正品华为mate30pro/直降nova7se/p40pro+
  264.           <span class="iconfont hot" style="vertical-align: middle;"
  265.             >&#xe675;</span
  266.           ></a
  267.         >
  268.       </div>
  270.       <div class="goods-desc">
  271.         <a href=""><img src="static/images/i7.png" alt="" /></a>
  272.         <a href=""
  273.           >华为/HUAWEI&nbsp;MateBook&nbsp;X&nbsp;Pro2020款英特尔十代i7-10510U+16GB+512GB/1TBSSD独显笔记本
  274.           <span class="iconfont hot" style="vertical-align: middle;"
  275.             >&#xe675;</span
  276.           >
  277.         </a>
  278.       </div>
  279.       <div class="goods-desc">
  280.         <a href=""><img src="static/images/p40.png" alt="" /></a>
  281.         <a href=""
  282.           >领劵200【12期免息+当天发】HUAWEI/华为P40
  283.           5G手机官方旗舰店官网正品华为mate30pro/直降nova7se/p40pro+
  284.           <span class="iconfont hot" style="vertical-align: middle;"
  285.             >&#xe675;</span
  286.           ></a
  287.         >
  288.       </div>
  290.       <div class="goods-desc">
  291.         <a href=""><img src="static/images/i7.png" alt="" /></a>
  292.         <a href=""
  293.           >华为/HUAWEI&nbsp;MateBook&nbsp;X&nbsp;Pro2020款英特尔十代i7-10510U+16GB+512GB/1TBSSD独显笔记本
  294.           <span class="iconfont hot" style="vertical-align: middle;"
  295.             >&#xe675;</span
  296.           >
  297.         </a>
  298.       </div>
  299.       <div class="goods-desc">
  300.         <a href=""><img src="static/images/p40.png" alt="" /></a>
  301.         <a href=""
  302.           >领劵200【12期免息+当天发】HUAWEI/华为P40
  303.           5G手机官方旗舰店官网正品华为mate30pro/直降nova7se/p40pro+
  304.           <span class="iconfont hot" style="vertical-align: middle;"
  305.             >&#xe675;</span
  306.           ></a
  307.         >
  308.       </div>
  310.       <div class="goods-desc">
  311.         <a href=""><img src="static/images/i7.png" alt="" /></a>
  312.         <a href=""
  313.           >华为/HUAWEI&nbsp;MateBook&nbsp;X&nbsp;Pro2020款英特尔十代i7-10510U+16GB+512GB/1TBSSD独显笔记本
  314.           <span class="iconfont hot" style="vertical-align: middle;"
  315.             >&#xe675;</span
  316.           >
  317.         </a>
  318.       </div>
  319.     </div>
  321.     <footer>
  322.       <a href="">
  323.         <span class="iconfont hot">&#xe60c;</span>
  324.         <span>首页</span>
  325.       </a>
  326.       <a href="">
  327.         <span class="iconfont hot">&#xe64b;</span>
  328.         <span>分类</span>
  329.       </a>
  330.       <a href="">
  331.         <span class="iconfont hot">&#xe602;</span>
  332.         <span>购物车</span>
  333.       </a>
  334.       <a href="">
  335.         <span class="iconfont hot">&#xe65b;</span>
  336.         <span>未登录</span>
  337.       </a>
  338.     </footer>
  339.   </body>
  340. </html>
  • 预览：

五、学习总结

只有通过多练习才能知道自己到底会不会，自己掌握了那些内容，自己是怎么理解的，还有哪些内容是自己不会的，从而帮助自己更快的学习。

上一条：怎么用anaconda安装opencv？下一条：html+css用户注册模板
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多