响应式布局--flex学习

已于 2022-07-07 15:04:41 修改
阅读量4.3k 收藏 20
点赞数 6
分类专栏： 前端 文章标签： css 微信小程序 前端
于 2022-07-07 14:43:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32845825/article/details/125486195
版权

1 简介

flex 是css3 中一种新的布局模式，可以简单、完整、响应式地实现各种页面布局，非常适合移动端页面开发，使用flex布局来应对页面需要适应不同屏幕大小以及各种设备类型等问题，而且目前是市面上几乎所有浏览器都支持flex 布局，尤其是在移动端。

2 开启flex布局

将元素的 display 属性设置为 flex，即可开启 flex 布局；

注意：开启弹性布局后，子项的 float 、clear 和vertical-align 属性将失效；

.container {
    display: flex;
}

3 容器属性

.container {
	/*01 主轴方向：从左到右（默认） | 从右到左 | 从上到下 | 从下到上*/
	flex-direction: row | row-reverse | column | column-reverse;

	/*02 换行：不换行（默认） | 换行 | 换行并且第一行在下方*/
	flex-wrap: nowrap | wrap | wrap-reverse;

	/*03 主轴方向和换行简写方式*/
	flex-flow: {flex-direction} {flex-wrap};

	/*04 主轴对齐方式： 靠左对齐（默认） | 靠右对齐 | 居中对齐 | 两端对齐 | 平均分布*/
	justify-content: flex-start | flex-end | center | space-between | space-around;

	/*05 交叉轴对齐方式： 顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/
	align-items:  flex-start | flex-end | center | baseline | stretch;

	/*06 多主轴对齐方式： 顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 上下平均分布*/
	align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

3.1 flex-direction -- 主轴方向对齐

  flex-direction 属性决定主轴的方向，从而决定子元素在容器中的位置，共有四个值可选

flex-direction: row | row-reverse | column | column-reverse;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
    <title>flex学习</title>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            width: 500px;
            height: 150px;
            margin: 20px auto;
            background-color: #ccc;
        }
        .item {
            width: 100px;
            height: 30px;
            margin-right: 10px;
            margin-top: 10px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

（1）flex-direction:row; 

 （2）flex-direction:row-reverse;

 （3）flex-direction: column;

 （4）flex-direction: column-reverse;

3.2 flex-wrap -- 换行

flex-wrap 属性用于指定弹性布局中子项是否换行，默认不换行，共有三个值可以选

flex-wrap: nowrap | wrap | wrap-reverse;

 注：使用该属性，需要为弹性容器添加固定宽度， 当弹性容器宽度超过子项宽度总和时， 值设为 wrap 或 wrap-reverse 均不起效果 ；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
    <title>flex学习</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            width: 500px;
            height: 150px;
            margin: 20px auto;
            background-color: #ccc;
        }
        .item {
            width: 100px;
            height: 30px;
            margin-right: 10px;
            margin-top: 10px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
    </div>
</body>
</html>

（1）flex-wrap: nowrap;

（2）flex-wrap: wrap;

（3） flex-wrap: wrap-reverse;

 

3.3 flex-flow -- 主轴方向和换行简写

 flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap;

flex-flow: {flex-direction} {flex-wrap};
flex-flow: row nowrap;
flex-flow: row wrap;
flex-flow: row wrap-reverse;
flex-flow: column nowrap;
flex-flow: column wrap;
flex-flow: column wrap-reverse;

3.4 justify-content -- 主轴对齐方式

 justify-content  属性定义了子项在 主轴（水平方向x轴）上的对齐方式，可选值有：

justify-content: flex-start | flex-end | center | space-between | space-around;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
    <title>flex学习</title>
    <style>
        .container {
            display: flex;
            justify-content: flex-start;
            width: 500px;
            height: 150px;
            margin: 20px auto;
            background-color: #ccc;
        }
        .item {
            width: 100px;
            height: 30px;
            margin-right: 10px;
            margin-top: 10px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

（1） justify-content: flex-start;

（2） justify-content: flex-end;

（3） justify-content: center;

（4） justify-content: space-between;

（5）justify-content: space-around;

3.5 align-items -- 交叉轴对齐方式

align-items 属性定义弹性容器子项在交叉轴（垂直方向）上的对齐方式，可选值：

align-items:  flex-start | flex-end | center | baseline | stretch;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
    <title>flex学习</title>
    <style>
        .container {
            display: flex;
            align-items: stretch;
            width: 500px;
            height: 150px;
            margin: 20px auto;
            background-color: #ccc;
        }
        .item {
            width: 100px;
            /*height: 30px;*/
            margin-right: 10px;
            margin-top: 10px;
            background-color: skyblue;

        }
        .item:nth-of-type(2) {
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

（1）align-items:  flex-start;

（2）align-items:  flex-end;

（3）align-items: center;

（4）align-items: baseline;

（5）align-items: stretch;

3.6 align-content -- 多主轴对齐方式

align-content 属性定义了多根轴线的对齐方式，简单说就是盒子内部的元素超过了盒子项的宽度（默认）出现了换行，也就是有多行才可以，可选值：

align-content: flex-start | flex-end | center | space-between | space-around | stretch;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
    <title>flex学习</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            align-content: stretch;
            width: 500px;
            height: 240px;
            margin: 20px auto;
            background-color: #ccc;
        }
        .item {
            width: 80px;
            height: 80px;
            margin-right: 10px;
            margin-top: 10px;
            background-color: skyblue;

        }
        
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
    </div>
</body>
</html>

（1）align-content: stretch;（默认）

  

（2）align-content: flex-start;

（3）align-content: flex-end;

（4）align-content: center;

 

（5）align-content: space-between;

  

（6）align-content: space-around;

蹦跶哒的王小哲
关注
  • 6
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端响应式布局笔记-flex
06-05
flex中常用的属性
响应式布局
09-22
响应式布局是现代网页设计的关键技术之一，它允许网页在不同设备上自适应显示，无论是桌面电脑、平板电脑还是智能手机，都能提供良好...学习并掌握响应式布局对于任何IT从业者，尤其是前端开发者来说，都是至关重要的。
CSS3 弹性布局弹性流（flex-flow）属性详解和实例
陈小峰（iefreer）的专栏
02-24 4万+
弹性布局是CSS3引入的强大的布局方式，用来替代以前Web开发人员使用的一些复杂而易错hacks方法（如使用float进行类似流式布局）。其中flex-flow是flex-direction和flex-wrap属性的简写方式，语法如下：flex-flow: || flex-direction: row（初始值） | row-reverse | column | column-reversefle
Flex布局基础
qq_44709970的博客
12-11 1279
概念：什么是Flex？ FlexiableBox即是弹性盒子，用来进行弹性布局，可以配合rem处理尺寸的适配问题 为什么使用Flex布局？ 1，用来为盒状模型提供最大的灵活性。任何容器都可以指定为Flex布局（使用display属性） 即：display:flex; 2，更加符合响应式设计的特点 虽然说，我们在进行前端布局时，可以使用position、float等属性满足我们的所有需求，但是代码量大且不够灵活 初识Flex 每个弹性容器都有两根轴：主轴和交叉轴，两轴之间成90度关系.
Flex布局：打造灵动、响应式网页设计的利器
JINGWHALE
04-03 718
Flex布局，又称弹性盒布局，是现代CSS布局体系中的璀璨明珠。它以革命性的理念革新了传统的网页布局方式，为设计师和开发者提供了前所未有的灵活性与便捷性。本篇内容精讲将引领您全方位领略Flex布局的魅力，深入剖析其工作原理与核心属性，助您在实践中轻松驾驭复杂、响应式的网页设计。
flex布局
EmotionComputer
04-12 1620
(1). 前言 传统的布局方案，基于css盒子模型，float+display+position，TA对于很多特殊布局方案就非常不方便，必须垂直居中, 举例方案1(宽高度已知，ie9+）) <style> .outer{ border: 1px solid red; width: 500px; height: 500px; ...
flex-wrap容器属性
巧克力很苦的小博客
05-02 1万+
flex-wrap容器属性 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。 默认情况下，flex项目都会尝试适合一行。您可以更改它并允许项目根据需要使用此属性进行换行。 .container{ flex-wrap: nowrap | wrap | wrap-reverse; } 它可能取三个值。 （1）nowrap（默认）：不换...
flex弹性布局（详解）
wshwsh_的博客
08-09 1万+
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
学习笔记1_flex布局的属性
ankh的博客
03-29 1512
一、设置在容器上的属性 1.flex-direction属性 flex-direction属性决定主轴的方向 .box { flex-direction: row | row-reverse | column | column-reverse; } 1)row（默认值）：主轴为水平方向，起点在左端。 2)row-reverse：主轴为水平方向，起点在右端。 3)column：主轴为垂直方向，起点在上。 4)column-reverse：主轴为垂直方向，起点在下。 2.flex-wrap属性 f
Flex弹性布局一文通【最全Flex教学】
一键难忘的博客
03-07 660
flex 是 flexible Box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。align-content 适应于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。注意：主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的。设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。
响应式布局大全代码
07-03
如果压缩包中有Bootstrap相关的代码，那么可以学习如何利用这个框架简化响应式布局的开发。 6. **Mobile-First策略**：这是一种优先考虑移动设备的设计方法，先为小屏幕设备编写样式，然后通过媒体查询添加针对大...
响应式布局小案例
01-07
响应式布局是现代网页设计的关键技术之一，它允许网页在不同设备上，如桌面电脑、平板电脑和手机，自适应地...通过学习和实践这个HTML5响应式布局小案例，我们可以掌握这项技能，为创建适应未来的网站打下坚实基础。
flex布局-携程网-移动端
02-23
通过学习和实践，开发者不仅能掌握Flex布局的基本用法，还能理解如何结合其他CSS技术，如媒体查询（Media Queries）来进一步提升响应式设计的水平。对于想要从事移动端网页开发的人员来说，这是一次非常有价值的实践...
flex布局详解
程序员小明1024
12-20 5990
.markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rgba(37, 41, 51, 1) } .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .ma...
弹性盒子（display: flex）布局超全讲解|Flex 布局教程
热门推荐
肥晨开发的学习之路
06-16 11万+
弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
flex布局看这一篇就够了
qq_46048008的博客
08-20 2万+
“弹性盒布局”，旨在提供一种更有效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小未知或动态变化声明定义容器里面包含着项目元素，使用或声明为弹性容器。
2.flex 容器属性 flex-direction ，flex-wrap ，flex-flow
code_dream_wq的博客
11-25 2502
flex-direction: row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。 flex-direction属性：决定主轴的方向（即项目的排列方向） .box { flex-direction: row | row-reverse | column | column-reverse; } 例子 <!DOCTYP.
flex
weixin_44546855的博客
02-19 112
Flex布局也叫弹性布局，有自动适应大小的特点，可以适用pc端和手机等。  Flex有六个属性分别为  flex-direction 属性决定主轴的方向（即项目的排列方向）  flex-wrap  flex-flow  justify-content  align-items  align-content 下面是之前使用flex写的骰子 Flex布局也叫弹性布局，有自动适应大小的特点...
响应式布局学习笔记和经验
最新发布
06-20
响应式布局是一种网页设计技术，它允许网站内容根据用户设备的不同屏幕尺寸和方向自动调整布局，以提供最佳的用户体验。学习响应式布局主要包括以下几个方面： 1. 基础概念：理解媒体查询（Media Queries），它是CSS3的关键技术，用于根据不同设备的视口宽度应用不同的CSS样式。 2. 流式布局：学习如何使用百分比宽度而不是固定像素值，使元素能够自适应容器的大小。 3. 弹性盒模型（Flexbox）：掌握如何使用flex容器和项目属性来创建灵活的网格布局。 4. 栅格系统：了解像Bootstrap或Gridify这样的栅格框架，它们提供了预定义的列数和间距，便于快速构建响应式布局。 5. CSS Grid：深入理解CSS Grid布局，它是另一种强大的二维布局工具，尤其适合复杂的页面结构。 6. 图像和媒体：优化图像加载，使用srcset和sizes属性，以及响应式图片替代方案。 7. 实践与项目：动手做几个响应式设计的练习项目，比如重构现有的网站或搭建一个响应式的原型。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值