多语言展示
当前在线：409今日阅读：23今日分享：41

css flex布局的相关使用总结
Flex意为”弹性布局”，为盒状模型提供最大的灵活性。容器都可以指定为Flex布局。flex布局的出现，能提供更灵活的布局模式，让我们不拘泥于float margin-left 等
工具/原料

css html flex

方法/步骤
1

我们先看看不使用flex之前的html展示效果，body代码：

   
baidu
   python    java    c#    go打开这个html页面我们可以看到如下图二效果，div里面的div将占据一行，导致换行，而且布局乱。

2

首先要使用flex，我们必须首先在父容器中写入：style='display: flex'  这样就代表着将使用flex布局外层div：

我们会发现里面的显示发生了变化，子层div不在换行，刷新页面如下图所示

3

仅仅实现不换行是不够的，也许我们需要都换行呢，如果都要换行的话，我们只需要外层div样式这样写：

没错flex-direction加入属性数将控制着变化，flex-direction有以下几个属性row：主轴为水平方向，起点在左端。（默认值）row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。如下代码刷新页面将如下图二所示

4

有时候使用了flex布局，所有子类都在一行，容器又太小，这时候我们就需要对它们进行换行 如下图一所示 flex-wrap属性将为我们实现该功能我们对div进行修改

   
baidu
   python    java    c#    go
刷新页面将如图二所示 flex-wrap有三个属性nowrap：不换行（默认）wrap：换行wrap-reverse：换行，第一行在下方 修改div样式style='font-size:100px;display: flex;flex-direction: row;flex-wrap:wrap-reverse' 刷新页面如图四所示：

5

如果我们要基于容器，把里面的内容放大缩小呢，那就使用flex-grow属性 默认为0，如果存在剩余空间，也不放大修改代码如下：

   
baidu
   python    java    c#    go
刷新页面如下图一所示：

6

felx 的 align-items属性，align-items属性定义子类交叉轴的对齐方式。align-items属性：flex-start：交叉轴的起点对齐。flex-end：交叉轴的终点对齐。center：交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。stretch：如果项目未设置高度或设为auto，将占满整个容器的高度（默认值）

7

justify-content属性定义了项目在主轴上的对齐方式。 justify-content属性：flex-start：左对齐（默认值）flex-end：右对齐center： 居中space-between：两端对齐，项目之间的间隔都相等。space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。例如

   
baidu
   
python
   
java
   
c
   
go
   
basic
效果如下图二所示：

注意事项

felx属性使用前面要加 display: flex

推荐信息
网站地图 XML TXT RSS 隐私政策 服务条款 使用条款
Copyright ©1996-2025 www.onijiang.com Corporation, All Rights Reserved