Flex布局详解

编程之家收集整理的这篇文章主要介绍了Flex布局详解编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

概述

Flex 布局详解一、入门1. flex 是什么?flex 是 Flexible Box 的缩写,就是弹性盒子布局的意思2. 为什么我们需要 flex?解决元素居中问题自动弹性伸缩,合适适配不同大小的屏幕,和移动端3.flex 常见术语 三个2序号简记术语1二成员容器和项目(container / item)2二根轴主轴与交叉轴(main-axis / cross-axis)3二根线起始线(main/cross-start)与结束,下方主要介绍关于Flex布局详解的全文内容,希望对你有所帮助。

Flex 布局详解

一、入门

1. flex 是什么?

  • flex 是 Flexible Box 的缩写,就是弹性盒子布局的意思

2. 为什么我们需要 flex?

3.flex 常见术语 三个2

序号 简记 术语
1 二成员 容器和项目(container / item)
2 二根轴 主轴与交叉轴(main-axis / cross-axis)
3 二根线 起始线(main/cross-start)与结束线(main/cross-end)

img

二、容器 container 的属性

外面的大容器的属性设置

1. flex-direction   主轴方向
2. flex-wrap        主轴一行满了换行
3. flex-flow        1和2的组合
4. justify-content  主轴元素对齐方式
5. align-items      交叉轴元素对齐方式//单行
6. align-content    交叉轴行对齐方式//多行

1.flex-direction 主轴方向

row(认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。

image-20210331195635185

image-20210331195724739

image-20210331195803337

image-20210331195911522

code

<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1.0">
    <Title>document</Title>
</head>
<style>
.container{
    display: flex;
    height: 600px;
    background-color: rgb(219,219,219);
}
.container{
    flex-direction: row;
    /* flex-direction: row-reverse; */
    /* flex-direction: column; */
    /* flex-direction: column-reverse; */
}
.item{
    padding: 100px;
}
</style>
<body>
    <div class="container">
        <div class="item" style="background-color: antiquewhite;">1</div>
        <div class="item" style="background-color: aqua;">2</div>
        <div class="item" style="background-color: aquamarine;">3</div>
    </div>
</body>
</HTML>

2. flex-wrap 主轴一行满了换行

nowrap (认值) 不换行压缩宽度
wrap    换行
wrap-reverses 反向换行

image-20210331200420335

image-20210331200527014

image-20210331200656686

code

<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta name="vIEwport" content="wIDth=device-wIDth,219);
}
.container{
    /* flex-wrap: nowrap; */
    flex-wrap: wrap;
    /* flex-wrap: wrap-reverse; */
}
.item{
    padding: 100px;
}
</style>
<body>
    <div class="container">
        <div class="item" style="background-color: antiquewhite;">1</div>
        <div class="item" style="background-color: aqua;">2</div>
        <div class="item" style="background-color: aquamarine;">3</div>
        <div class="item" style="background-color: #aaff00;">4</div>
        <div class="item" style="background-color: #ffff00;">5</div>
    </div>
</body>
</HTML>

3. flex-flow 1和2的组合

flex-low: [flex-direction] [flex-wrap]

就是 1 和 2 的组合,简写,同上,这里不赘述.

4.justify-content 主轴元素对齐方式

这里是元素的对齐,区别于刚刚的「方向」

flex-start ()靠着main-start对齐//参考常见术语(一般是左方向)
flex-end   靠着main-end对齐//参考常见术语(一般是右方向)
center     靠着主轴居中对齐//一般就是居中对齐
space-between 两端对齐,靠着容器壁,剩余空间平分
space-around  分散对齐,不靠着容器壁,剩余空间在每个项目二侧平均分配
space-evenly  平均对齐,不靠着容器壁,剩余空间平分

@H_502_912@

image-20210331202028245

image-20210331202106687

image-20210331202149205

image-20210331202241366

image-20210331202332871

code

<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta name="vIEwport" content="wIDth=device-wIDth,219);
}
.container{
    /* justify-content: flex-start; */
    /* justify-content: flex-end; */
    /* justify-content: center; */
    /* justify-content: space-between; */
    /* justify-content: space-around; */
    justify-content: space-evenly;
}
.item{
    padding: 100px;
}
</style>
<body>
    <div class="container">
        <div class="item" style="background-color: antiquewhite;">1</div>
        <div class="item" style="background-color: aqua;">2</div>
        <div class="item" style="background-color: aquamarine;">3</div>
    </div>
</body>
</HTML>

5.align-items item「项目」在交叉轴上对齐方式「单轴」

这个是 container 容器的属性设置的是 items 项目元素在交叉轴上对齐样式

flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(认值)伸展:如果项目未设置高度或设为auto,将占满整个容器的高度。

image-20210331202806289

image-20210331202841120

image-20210331202915627

image-20210331203018581

(一般用不着,本来就在一条直线上)

image-20210331203130876

伸展,就是会填充宽度

6. align-content 交叉轴行对齐方式 多行

这个和 justify-content 属性一模一样,

justify-conent,align-items,align-content 都极度相似.

flex-start (每一行)()靠着cross-start对齐//参考常见术语(一般是左方向)
flex-end   (每一行)靠着cross-end对齐//参考常见术语(一般是右方向)
center     (每一行)靠着cross线居中对齐//一般就是居中对齐
space-between (每一行)两端对齐,靠着容器上下壁,剩余空间平分
space-around  (每一行)分散对齐,不靠着容器壁,剩余空间在每个项目二侧平均分配
strentch      (每一行)伸缩,占满整个高度

image-20210331204122090

image-20210331204205734

image-20210331204303849

image-20210331204403783

image-20210331205003164

image-20210331205106522

code

<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1.0">
    <Title>document</Title>
</head>
<style>
.container{
    display: flex;
    height: 800px;
    background-color: rgb(219,219);
    /* 因为需要多行,所以要换行 */
    flex-wrap: wrap;
}
.container{
    align-content: flex-start;
    /* align-content: flex-end; */
    /* align-content: center; */
    /* align-content: space-between; */
    /* align-content: space-around; */
    /* align-content: stretch; */

}
.item{
    padding: 100px;
}
</style>
<body>
    <div class="container">
        <div class="item" style="background-color: antiquewhite;">1</div>
        <div class="item" style="background-color: aqua;">2</div>
        <div class="item" style="background-color: aquamarine;">3</div>
        <div class="item" style="background-color: #aaff00;">4</div>
        <div class="item" style="background-color: #ffff00;">5</div>
    </div>
</body>
</HTML>

三、项目元素 item 的属性

容器里面的子元素item「项目」的属性

flex-grow:长大
flex-shrinik: 缩小
align-self: 覆盖container align-items 属性
order 排序
flex-basis: 有效宽度

1.flex-grow 长大

  • 在容器主轴上存在剩余空间时,flex-grow才有意义

  • 属性的值,称为放大因子,常见的属性值如下:

序号 属性 描述
1 0认值 不放大,保持初始值
2 initial 设置认值,与0等效
3 n 放大因子: 正数

放大后的效果

image-20210331210642331

<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta name="vIEwport" content="wIDth=device-wIDth,219);
}
.item{
    padding: 100px;
}
.item1{
    /* 其他的都是0,这一个是1,所以能所有剩下的空间都是item1的 */
    flex-grow: 1;
}

</style>
<body>
    <div class="container">
        <div class="item item1" style="background-color: antiquewhite;">1</div>
        <div class="item" style="background-color: aqua;">2</div>
        <div class="item" style="background-color: aquamarine;">3</div>
    </div>
</body>
</HTML>

@L_403_14@2. flex-shrinik: 缩小

  • 当容器主轴 “空间不足” 且 “禁止换行” 时,flex-shrink才有意义
  • 属性的值,称为收缩因子,常见的属性值如下:
序号 属性 描述
1 1认值 允许项目收缩
2 initial 设置初始认值,与 1 等效
3 0 禁止收缩,保持原始尺寸
4 n 收缩因子: 正数

示例:

image-20210331212509330

<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1.0">
    <Title>document</Title>
</head>
<style>
.container{
    display: flex;
    height: 800px;
    wIDth: 400px;
    background-color: rgb(219,219);
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
}
.item{
    wIDth: 200px;
    height: 200px;
    Font-size: 1.5rem;
    /* 禁止收缩 */
    flex-shrink: 0;
}
.item1{
    flex-shrink: 1;
}
.item2{
    flex-shrink: 0;
}
.item3{
    flex-shrink: 3;
}
/*  container 容器的宽度是 400,3个字元素总宽度是 600 超过了 200
    然后按照比例缩小到这些元素上 200/4 = 50
    item1 缩小 50 * 1 = 50,还剩 150
    item2 不缩小
    item3 缩小 50 * 3 = 150 还剩 50
 */

</style>
<body>
    <div class="container">
        <div class="item item1" style="background-color: antiquewhite;">1</div>
        <div class="item item2" style="background-color: aqua;">2</div>
        <div class="item item3" style="background-color: aquamarine;">3</div>
    </div>
</body>
</HTML>

@L_403_15@3. align-self: 覆盖container align-items 属性

序号 属性 描述
1 auto认值 继承 align-items 属性
2 flex-start 与交叉轴起始线对齐
3 flex-end 与交叉轴终止线对齐
4 center 与交叉轴中间线对齐: 居中对齐
5 stretch 在交叉轴方向上拉伸
6 baseline 与基线对齐(与内容相关用得极少)

例子:

image-20210331213131744

HTML

<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta name="vIEwport" content="wIDth=device-wIDth,219);
    flex-direction: row;
    flex-wrap: nowrap;
}
.container{
    /* container指定容器的对齐 flex-start */
    align-items: flex-start;
}
.item{
    wIDth: 200px;
    height: 200px;
}
.item3{
    /* 元素3 item3 覆盖container的设置,flex-end */
    align-self: flex-end;
}

</style>
<body>
    <div class="container">
        <div class="item item1" style="background-color: antiquewhite;">1</div>
        <div class="item item2" style="background-color: aqua;">2</div>
        <div class="item item3" style="background-color: aquamarine;">3</div>
    </div>
</body>
</HTML>

4. order 排序

image-20210331213812047

就是将元素重新排序

code

<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta name="vIEwport" content="wIDth=device-wIDth,219);
}

.item{
    wIDth: 200px;
    height: 200px;
    order: 0;
}
.item1{
    order: 3;
}

</style>
<body>
    <div class="container">
        <div class="item item1" style="background-color: antiquewhite;">1</div>
        <div class="item item2" style="background-color: aqua;">2</div>
        <div class="item item3" style="background-color: aquamarine;">3</div>
    </div>
</body>
</HTML>

5. flex-basis属性

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的认值为auto,即项目的本来大小。

.item {
  flex-basis: <length> | auto; /* default auto */
}

它可以设为跟wIDthheight属性一样的值(比如350px),则项目将占据固定空间。

参考:

Flex 布局教程:语法篇 - 阮一峰的网络日志 (ruanyifeng.com)

flex布局(主轴方向 、主轴项目对齐方式 、交叉轴项目对齐 、项目顺序 、项目独立对齐方向 ) - 前端 - php中文网博客

总结

以上是编程之家为你收集整理的Flex布局详解全部内容,希望文章能够帮你解决Flex布局详解所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

CSS文章

CSS有三种方法可以在站点网页上使用样式表,外联式Linking(也叫外部样式):将网页链接到外部样式表。嵌入式Embedding(也叫内页样式):在网页上创建嵌入的样式表。
CSS 用于控制网页的样式和布局。CSS3 是最新的 CSS 标准。对CSS3已完全向后兼容,所以你就不必改变现有的设计。浏览器将永远支持CSS2。
做过网站的人都知道我们经常会遇到一些栏目里的文字超出栏目宽度,这个时候怎么办呢?估计100%做程序设计的人都想到了,对!用left函数来截取字符就可以了。但是这个样子对SEO来说并不友好,下面青岛星网介绍一种CSS截取字符串的方法。
客户在更新网站新闻产品的时候,往往工作人员根本不管图片尺寸就上传,图片尺寸如果超出页面的宽度很前台页面之间就撑开了,下面青岛星网跟大家分享:CSS解决图片过大撑开页面的方法。
CSS在定义class与ID的时候应该如何合理的命名,今天青岛星网就:CSS的命名规范来给大家做详细介绍,希望大家都能编写规划化的CSS文件。
Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表。换句话说,其允许我们在不改变内容的情况下,改变页面的布局以精确适应不同的设备。
小三角形作为网页常用小图标,我们一般都是用图片格式表达,今天青岛星网跟大家分享:纯CSS写出小三角形,无图片单纯CSS编写的三角形哦。
以前想实现文字描边效果只能用PS制作图片,现在我们可以用CSS3就可以实现文字描边效果其实,不用图片还可以文字描边哦,下面看青岛星网的实现方式。
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注