阅读 83

【CSS全解】CSS布局 - Flex布局

教程(来自CSS Tricks):

先了解
容器:container ; items:项目

image.png

语法

写法:如何让一个元素变成flex容器:

.container{
   display: flex;
}
复制代码

flex container有哪些属性、以下都是样式

改变流动方向:flex-direction

image.png

改变折行:flex-wrap

image.png

主轴对其方式:justify-content

image.png

以上代码效果如下:

image.png

次轴对齐:align-items

image.png

align-items: stretch; 即使内容高度不一样,也让item的高度一样 见图:

image.png

多行内容:align-content

image.png

flex item有哪些属性,以下都是样式

order:控制顺序

image.png

  • order: 默认是0
  • 按照order从小到大的顺序排
  • 负数、0、正数

image.png

flex-grow:控制如何变胖

image.png

image.png

flex-shrink:控制如何变瘦

一般写lex-shrink:0防止变瘦,默认是1

image.png

align-self 定制 align-items

align-self特例独行:

image.png

重点(总结)

记住这些代码:

  • display: flex 让一个元素变成flex容器
  • flex-direction: row/column 控制流动方向:左到右,上到下
  • flex-wrap: wrap 改变折行
  • justify-content: center/space-between 主轴(横轴)对齐方式:居中/分开
  • align-items: center 次轴(纵轴)居中

做个Flex布局

image.png

效果如下: js.jirengu.com/suroqemaya/…
GitHub : jiangwenxu.github.io/Flex.css/Fl…

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Flex布局</title>
</head>

<body>
  <header class="header">
    <div class="logo">
      <img src="https://xiedaimala.com/packs/_/assets/images/logos/red-logo-3f8db9041e6c15d4ae7ed7e4087c4b98.png" alt="">
    </div>
    <ul>
      <li>首页</li>
      <li>课程</li>
      <li>优惠</li>
      <li>关于</li>
    </ul>
  </header>
  <div class="content">
    <aside>一行有六个字</aside>
    <main>主要内容</main>
    <div class="ad">广告</div>
  </div>

  <div class="imagelist ">
    <div class="x">

      <div class="image">平均布局</div>
      <div class="image">平均布局</div>
      <div class="image">平均布局</div>
      <div class="image">平均布局</div>
      <div class="image">平均布局</div>
      <div class="image">平均布局</div>
      <div class="image">平均布局</div>
    </div>

  </div>
</body>

</html>
复制代码
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul,
ol {
  list-style: none
}
img {
  max-width: 100%;
}
header {
  display: flex;
  justify-content: space-between;           **把logo和ul分开**
  align-items: center;                      **让logo和ul纵轴居中**
  background: grey;
}
.logo {
  display: flex;
  align-items: center;
}
.logo>img {
  height: 20px;
  vertical-align: top;                     **去除图片多余背景色**
}
ul {
  display: flex;
}
ul>li {
  padding: 4px;
}
.content {
  display: flex;
  width: 700px;
  margin-left: auto;                    **块级元素居中**
  margin-right: auto;
}
.content>aside {
  border: 1px solid red;
  width: 200px;
}
.content>main {
  border: 1px solid red;
  flex-grow: 1;                        **剩余空间给main,尽量让其变胖**
  height: 400px;
}
.content>.ad {
  border: 1px solid red;
  width: 100px;
}
.imagelist {
  outline: 1px solid blue;
  width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.imagelist>.x {
  display: flex;
  margin-top: 10px;
  flex-wrap: wrap;                               **让平均布局变行**
  margin-right: -12px;       **负margin用来减掉最后一个平均布局的12px**
}                            **不然移动不上去**
.image {
  border: 1px solid green;
  width: 166px;
  height: 166px;
  margin-right: 12px;
  margin-bottom: 10px;                     **底部间隔10px**
}
复制代码

注意:

想让导航栏去到右边有两种写法:

  1. 在父元素上设置justify-content:space-between;
  2. 或者在导航栏上写margin-left: auto

在写平均布局时,即使用Justify-content:space-between也无法满足要求:

image.png

第一行是对的,但是第二行就错了,所以我们还是需要用到负margin 首先在Image上加上一个x div

<div class="imagelist ">
    <div class="x">

      <div class="image">平均布局</div>
      <div class="image">平均布局</div>
      <div class="image">平均布局</div>
      <div class="image">平均布局</div>
      <div class="image">平均布局</div>
      <div class="image">平均布局</div>
      <div class="image">平均布局</div>
    </div>

  </div>
复制代码

然后再加上负Margin,负Margin的值就是每个Image的Margin-right的值

.imagelist>.x {
  display: flex;
  margin-top: 10px;
  flex-wrap: wrap;
  margin-right: -12px;
}
复制代码
文章分类
前端
文章标签