css flex布局

最新推荐文章于 2024-05-21 19:43:55 发布

啥时候能干全栈

最新推荐文章于 2024-05-21 19:43:55 发布

阅读量320

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/qq_42177478/article/details/103064342

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在这里插入代码片一、默认情况下，元素的布局
盒模型；
外边距叠加：相邻两个元素都设置了margin并且两个margin有重叠，更大的设置会被保留，小的消失
二、弹性盒子
首先，我们需要选择将哪些元素将设置为柔性的盒子。我们需要给这些 flexible 元素的父元素 display 设置一个特定值。

section {
  display:flex
}

在这里插入图片描述
当元素表现为 flex 框时，它们沿着两个轴来布局：
主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
△flex-wrap ：规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
△flex-direction ：它可以指定主轴的方向（弹性盒子子类放置的地方）— 它默认值是 row，这使得它们在按你浏览器的默认语言方向排成一排。

flex-direction: row;
flex-wrap: wrap;
//等同于
flex-flow: row wrap;

flex 项的动态尺寸

//这是一个无单位的比例值，表示每个 flex 项沿主轴的可用空间大小。
article {
  flex: 1;
}
//现在当你刷新，你会看到第三个 <article> 元素占用了两倍的可用宽度和剩下的一样 — 现在总共有四个比例单位可用。 前两个 flex 项各有一个，因此它们占用每个可用空间的1/4。 第三个有两个单位，所以它占用2/4或这说是1/2的可用空间。
article:nth-of-type(3) {
  flex: 2;
}
//可以指定 flex 的最小值
//这表示“每个flex 项将首先给出200px的可用空间，然后，剩余的可用空间将根据分配的比例共享
article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 2 200px;
}

△align-items ：控制 flex 项在交叉轴上的位置。垂直居中：center；

//用 align-self 属性覆盖 align-items 的行为
 button:first-child {
        align-self: flex-end;
      }

flex 项排序

button:first-child {
  order: 1;
}

所有 flex 项默认的 order 值是 0。
order 值大的 flex 项比 order 值小的在显示顺序中更靠后。
相同 order 值的 flex 项按源顺序显示。所以假如你有四个元素，其 order 值分别是2，1，1和0，那么它们的显示顺序就分别是第四，第二，第三，和第一。
第三个元素显示在第二个后面是因为它们的 order 值一样，且第三个元素在源顺序中排在第二个后面。

button:last-child {
  order: -1;//排在主轴最前面	
}

flex 嵌套

  
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Complex flexbox example</title>
    <style>
      html {
        font-family: sans-serif;
      }
      body {
        margin: 0;
      }
      header {
        background: purple;
        height: 100px;
      }
      h1 {
        text-align: center;
        color: white;
        line-height: 100px;
        margin: 0;
      }
      article {
        padding: 10px;
        margin: 10px;
        background: aqua;
      }
      /* Add your flexbox CSS below here */
      section {
          /* 父级 */
        display: flex;
      }
      article {
        flex: 1 200px;
      }
      article:nth-of-type(3) {
        flex: 3 200px;
        display: flex;
        /* 属性值为列布局。 */
        flex-flow: column;
      }
      article:nth-of-type(3) div:first-child {
        flex: 1 100px;
        display: flex;
        /* 放在一个包装行(wrap raw)中，使它们居中对齐， */
        flex-flow: row wrap;
        align-items: center;
        justify-content: space-around;
      }
      /* 它一个值为1的 flex 属性。如果你调整浏览器窗口宽度，你会看到这是一个非常有趣的效果。按钮将尽可能占用最多的空间，尽可能多的堆在同一条线上，但是当它们不再适合在同一条线上，他们中的一些会到下一行去。 */
      button {
        flex: 1 auto;
        margin: 5px;
        font-size: 18px;
        line-height: 1.5;
      }
      
    </style>
  </head>
  <body>
    <header>
      <h1>Complex flexbox example</h1>
    </header>

    <section>
      <article>
        <h2>First article</h2>

        <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
      </article>

      <article>
        <h2>Second article</h2>

        <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
      </article>

      <article>
        <div>
          <button>Smile</button>
          <button>Laugh</button>
          <button>Wink</button>
          <button>Shrug</button>
          <button>Blush</button>
        </div>
        <div>
          <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
        </div>
        <div>
          <p>Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art party.</p>
        </div>
      </article>
    </section>
  </body>
</html>

在这里插入图片描述

啥时候能干全栈

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css flex布局

一、默认情况下，元素的布局盒模型；外边距叠加：相邻两个元素都设置了margin并且两个margin有重叠，更大的设置会被保留，小的消失二、弹性盒子首先，我们需要选择将哪些元素将设置为柔性的盒子。我们需要给这些 flexible 元素的父元素 display 设置一个特定值。section { display:flex}当元素表现为 flex 框时，它们沿着两个轴来布局：主轴...
复制链接

扫一扫