阅读 1100

🌈从0到1—CSS系列之flex布局(实例)

一、flex容器基础概念

如上图

  • flex-container —— flex容器
  • flex-item —— 子元素
  • 水平方向上有一条轴线(主轴) —— main axis
  • 垂直方向上有一条轴线(十字轴) —— cross axis

先准备一下初始化代码, 只有三个文件。

1、index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="basic.css">
  <link rel="stylesheet" href="style.css">
  <title>flex</title>
</head>
<body>
  <div class="container">
    <div class="item item-1"><span> 1 </span></div>
    <div class="item item-2"><span> 2 </span></div>
    <div class="item item-3"><span> 3 </span></div>
    <div class="item item-4"><span> 4 </span></div>
    <div class="item item-5"><span> 5 </span></div>
  </div>
</body>
</html>
复制代码

2、basic.css

body{
  padding: 0;
  margin: 0;
}
.container{
  background: #42b983;
  padding: 10px;
}

.item{
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  background: #ffffff;
  color: #cccccc;
  padding: 30px;
  display: block;
  text-align: center;
}

.item span{
  font-size: 50px;
}
复制代码

3、style.css

  • 这是用来改变一些属性来改变页面显示效果的样式文件,后面修改的样式都是在此文件中修改的

页面初始效果如下图

接下来我们在 style.css 中改变一些属性来学习flex布局。

二、flex-container(弹性布局父容器)属性

flex布局(将对象作为弹性伸缩盒显示)

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

inline-flex布局(将对象作为内联弹性伸缩盒显示)

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

flex-direction (子元素的排列方向)

  • 默认是水平方向(flex-direction: row)
.container{
  display: flex;
  flex-direction: column;
}
复制代码

flex-wrap (是否要换行显示)

我们先添加一些子元素,便于效果展示

  • 默认是不换行(flex-wrap: nowrap)

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

flex-flow(同时控制flex-direction和flex-wrap)

.container{
  display: flex;
  flex-flow: row-reverse wrap;
}
复制代码

row-reverse 即水平反方向 还有column-reverse垂直反方向、wrap-reverse(反向换行)

justify-content(子元素主轴方向间隔)

  • 默认是(justify-content: flex-start)
.container{
  display: flex;
  justify-content: flex-end;
}
复制代码

.container{
  display: flex;
  justify-content: center;
}
复制代码

.container{
  display: flex;
  justify-content: space-between;
}
复制代码

.container{
  display: flex;
  justify-content: space-around;
}
复制代码

space-around 和 space-between 的区别就是 space-between 只会在子元素之间添加间隔,space-around 会把父容器边界也视为子元素添加间隔

align-items(子元素侧轴方向对齐方式)

  • 现在我们把容器的高度设置一下
.container{
  display: flex;
  justify-content: space-around;
  height: 300px;
}
复制代码
  • 默认是(align-items: stretch)拉伸

  • flex-start(容器顶部)

.container{
  display: flex;
  justify-content: space-around;
  height: 300px;
  align-items: flex-start;
}
复制代码

  • flex-center(居中)
.container{
  display: flex;
  justify-content: space-around;
  height: 300px;
  align-items: center;
}
复制代码

  • flex-end(容器底部)
.container{
  display: flex;
  justify-content: space-around;
  height: 300px;
  align-items: flex-end;
}
复制代码

  • baseline(以子元素里面的内容作为基准线水平对齐)
.container{
  display: flex;
  justify-content: space-around;
  height: 300px;
  align-items: baseline;
}

.item-1{
  padding-top: 60px;
}
.item-2{
  padding-top: 99px;
}

复制代码

align-content (子元素侧轴方向对齐方式)

  • 所有属性如下:(默认值为 stretch)
align-content: stretch|center|flex-start
|flex-end|space-between|space-around;
复制代码
.container{
  display: flex;
  flex-wrap: wrap;
  height: 300px;
}
复制代码
  • 以上属性效果图依次如下:

flex-item(子元素属性)

order(改变子元素的排列顺序)

  • 默认所有元素 order 属性值为 0,所以我们可以设置子元素的 order 属性来控制他们的顺序。
.container{
  display: flex;
  height: 500px;
  justify-content: space-around;
  align-items: flex-start;
}

.item-1{
  order: 1;
}
.item-6{
  order: -1;
}
复制代码
  • 如图,6 到了最前面,1 到了最后面

flex(flex-grow,flex-shrink 和 flex-basis的缩写)

align-self(单个控制子元素侧轴方向布局)

.container{
  display: flex;
  height: 500px;
  justify-content: space-around;
  align-items: flex-start;
}
.item-2{
  align-self: center;
}
.item-3{
  align-self: flex-end;
}
.item-4{
  align-self: center;
}
.item-6{
  align-self: center;
}
复制代码

结语:

  • 自己对弹性布局早已闻其名,但却一直一知半解,此文为自己做个小总结💦💦。
  • 如果路过的小伙伴觉得帮到了你一丢丢,那就点个赞再走哈✨🌈
  • 文中如有错误,欢迎指出哦!🍳🍳
关注下面的标签,发现更多相似文章
评论