flex布局

最新推荐文章于 2022-09-24 23:47:55 发布

苏七qaq

最新推荐文章于 2022-09-24 23:47:55 发布

阅读量70

点赞数

分类专栏：前端文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_45974277/article/details/119083932

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div
    {
      display: flex;
      /*这两句代码是设置flex布局之后默认的
      flex-direction: row;
      justify-content: flex-start;
      */
      justify-content: center;
      width: 600px;
      height: 400px;
      background-color: pink;
    }
    div span
    {
        width: 100px;
        height: 100px;
        background-color: purple;
    }
  </style>
</head>
<body>
 <div>
   <span>1</span>
   <span>2</span>
   <span>3</span>
   <span>4</span>
 </div>
</body>
</html>

设置为子元素居中对齐，这里发现元素之间没有间隔

如果设置为space-around,每个元素会平分剩余空间

如果设置为space-between,首尾元素先贴边,然后每个元素平分剩余空间

如果设置为：

flex-direction: column;

justify-content: space-between;

则变为

这里有一个问题，如果一行塞不下这么多个元素，则会强行改变元素的大小，从而强行塞下一行元素

这里设置flex-wrap

flex-wrap属性值，默认不换行

值	描述
nowrap	默认值。规定灵活的项目不拆行或不拆列。
wrap	规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse	规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

这里，有可能既要设置水平居中，又要设置垂直居中，就需要

stretch属性：元素拉伸至填满父容器的行高，但是不要给该元素高度值，不然高度定死了是没有变化的

这里要注意，如果定义主轴为x轴，则

justify-content: center;

align-items: center;

效果为

如果定义的主轴为y轴，则

所以flex优先定义主轴的对齐方式，再定义侧轴的对齐方式

但是，align-items只适用单行，像下图的多行设置得用align-content

align-content属性值如下：

实现：把一行三个元素看称一个整体，其实和justify-content的space-between属性值一样，但是，align-content只适用于多行,在单行中设置是不变的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div
    {
      display: flex;
      /*这三句代码是设置flex布局之后默认的
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: nowrap;
      */
      width: 400px;
      height: 500px;
      background-color: pink;
      flex-wrap: wrap;
      align-content: space-between;
    }
    div span
    {
        height: 100px;
        width: 100px;
        background-color: purple;
        margin: 10px;
    }
  </style>
</head>
<body>
 <div>
   <span>1</span>
   <span>2</span>
   <span>3</span>
   <span>4</span>
   <span>5</span>
   <span>6</span>
 </div>
</body>
</html>

总结：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
  section
    {
      display: flex;
      width: 60%;
      height: 150px;
      background-color: pink;
      margin: 0 auto;
    }
    section div:nth-child(1)
    {
      background-color: red;
      width: 100px;
      height: 150px;
    }
    section div:nth-child(2)
    {
      flex: 1;
      background-color: green;
    }
    section div:nth-child(3)
    {
      background-color: blue;
      width: 100px;
      height: 150px;
    }
    p
    {
      display: flex;
      width: 60%;
      height: 150px;
      background-color: pink;
      margin: 100px auto;
    }
    p span
    {
      flex: 1;
    }
    p span:nth-child(2)
    {
      flex: 2;
      background-color: white;
    }
  </style>
</head>
<body>
 <div>
  <section>
    <div></div>
    <div></div>
    <div></div>
  </section>
   <p>
     <span>1</span>
     <span>2</span>
     <span>3</span>
   </p>
 </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
  p
   {
    display: flex;
    width: 80%;
    height: 300px;
    background-color: pink;
   }
    p span
    {
      background-color: purple;
      margin-right: 10px;
      width: 150px;
      height: 100px;
    }
    p span:nth-child(2)
    {
      align-self: flex-end;
    }
    p span:nth-child(3)
    {
      order: -1;
    }
  </style>
</head>
<body>
 <div>
  <section>
    <div></div>
    <div></div>
    <div></div>
  </section>
   <p>
     <span>1</span>
     <span>2</span>
     <span>3</span>
   </p>
 </div>
</body>
</html>

苏七qaq

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div { display: flex; /*这两句代码是设置flex布局之后默认的 flex-direction: row; just...
复制链接

扫一扫

专栏目录