flex布局实战

最新推荐文章于 2024-02-12 22:19:08 发布
最新推荐文章于 2024-02-12 22:19:08 发布
阅读量577 收藏 5
点赞数 2
分类专栏： python开发 文章标签： flex 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22526061/article/details/90146133
版权

flex布局，是div包含div，外层div称为容器，内层div称为项目

当不设置外层属性为flex布局时，默认时一行一行排列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style type="text/css">

        .container{
            height:300px;
            width: 1000px;
            /*display:flex;*/
            background-color: yellow;
            /*flex-direction: row;*/
            /*flex-wrap:nowrap;*/
            /*flex-flow:flex-direction 和flex-wrap的简写方式;*/
            /*justify-content:flex-start;*/
            /*align-items:flex-start;*/
            /*align-content:stretch;*/
        }
        .left{
            background-color:red;
            /*flex:0.9 1 800px;*/
            /*text-align: center;*/
            /*line-height: 500px;*/
            /*vertical-align: middle;*/
            /*width:900px;*/
            /*height:200px;*/
            /*margin:0 auto;*/
        }
        .right{
            background-color:green;
            /*flex:0.1 1 100px;*/
            /*text-align: right;*/
            /*width:200px;*/
            /*height:200px;*/
        }
        </style>
</head>
<body>
    <div class=container>
        <div class='left'>left</div>
        <div class='right'>right</div>
    </div>
</body>

当外层div，display属性设置为flex时，默认按行排列，且flex属性生效，包含容器属性和项目属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style type="text/css">

        .container{
            height:300px;
            width: 1000px;
            display:flex;
            background-color: yellow;
            /*flex-direction: row-reverse;*/
            /*flex-wrap:nowrap;*/
            /*flex-flow:flex-direction 和flex-wrap的简写方式;*/
            /*justify-content:flex-start;*/
            /*align-items:flex-start;*/
            /*align-content:stretch;*/
        }
        .left{
            background-color:red;
            /*flex:0.9 1 800px;*/
            /*text-align: center;*/
            /*line-height: 500px;*/
            /*vertical-align: middle;*/
            /*width:900px;*/
            /*height:200px;*/
            /*margin:0 auto;*/
        }
        .right{
            background-color:green;
            /*flex:0.1 1 100px;*/
            /*text-align: right;*/
            /*width:200px;*/
            /*height:200px;*/
        }
        </style>
</head>
<body>
    <div class=container>
        <div class='left'>left</div>
        <div class='right'>right</div>
    </div>
</body>

容器属性一共有七种

  1. flex-direction
  2. flex-wrap
  3. flex-flow
  4. justify-content
  5. align-items
  6. align-content

项目属性一共有六种

  1. order
  2. flex-basis
  3. flex-grow
  4. flex-shrink
  5. flex
  6. align-self

首先讲解项目属性

1 flex-direction: 决定主轴的方向(即项目的排列方向)

flex-direction: row | row-reverse | column | column-reverse;

 4种可选，默认时row，按行从左到右排列，其他可以类比，以row-reverse和column-reverse为例，看下效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style type="text/css">

        .container{
            height:300px;
            width: 1000px;
            display:flex;
            background-color: yellow;
            flex-direction: row-reverse;
            /*flex-wrap:nowrap;*/
            /*flex-flow:flex-direction 和flex-wrap的简写方式;*/
            /*justify-content:flex-start;*/
            /*align-items:flex-start;*/
            /*align-content:stretch;*/
        }
        .left{
            background-color:red;
            /*flex:0.9 1 800px;*/
            /*text-align: center;*/
            /*line-height: 500px;*/
            /*vertical-align: middle;*/
            /*width:900px;*/
            /*height:200px;*/
            /*margin:0 auto;*/
        }
        .right{
            background-color:green;
            /*flex:0.1 1 100px;*/
            /*text-align: right;*/
            /*width:200px;*/
            /*height:200px;*/
        }
        </style>
</head>
<body>
    <div class=container>
        <div class='left'>left</div>
        <div class='right'>right</div>
    </div>
</body>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style type="text/css">

        .container{
            height:300px;
            width: 1000px;
            display:flex;
            background-color: yellow;
            flex-direction: column-reverse;
            /*flex-wrap:nowrap;*/
            /*flex-flow:flex-direction 和flex-wrap的简写方式;*/
            /*justify-content:flex-start;*/
            /*align-items:flex-start;*/
            /*align-content:stretch;*/
        }
        .left{
            background-color:red;
            /*flex:0.9 1 800px;*/
            /*text-align: center;*/
            /*line-height: 500px;*/
            /*vertical-align: middle;*/
            /*width:900px;*/
            /*height:200px;*/
            /*margin:0 auto;*/
        }
        .right{
            background-color:green;
            /*flex:0.1 1 100px;*/
            /*text-align: right;*/
            /*width:200px;*/
            /*height:200px;*/
        }
        </style>
</head>
<body>
    <div class=container>
        <div class='left'>left</div>
        <div class='right'>right</div>
    </div>
</body>

 

 2. flex-wrap: 决定容器内项目是否可换行

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

 第二个属性 当项目宽度超出容器宽度时 是否换行，默认不换行

这里设置一下每个项目的宽度，使它超出，看下效果，这里容器宽度时1000，left900，right200，900+200超出了容器宽度1000了，由于设置的时nowarp属性，自动将left的900长度调整为了818.182,right长度也减小了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style type="text/css">

        .container{
            height:300px;
            width: 1000px;
            display:flex;
            background-color: yellow;
            flex-direction: row;
            flex-wrap:nowrap;
            /*flex-flow:flex-direction 和flex-wrap的简写方式;*/
            /*justify-content:flex-start;*/
            /*align-items:flex-start;*/
            /*align-content:stretch;*/
        }
        .left{
            background-color:red;
            /*flex:0.9 1 800px;*/
            /*text-align: center;*/
            /*line-height: 500px;*/
            /*vertical-align: middle;*/
            width:900px;
            height:200px;
            /*margin:0 auto;*/
        }
        .right{
            background-color:green;
            /*flex:0.1 1 100px;*/
            /*text-align: right;*/
            width:200px;
            height:200px;
        }
        </style>
</head>
<body>
    <div class=container>
        <div class='left'>left</div>
        <div class='right'>right</div>
    </div>
</body>

 如果设置 wrap为wrap的话，显示效果如下，可以看到自动换行了，容器高度不够会溢出

下面把容器高度调高

可以看到多出来的行 会自动均匀填充在容器 的中间，这也就引出了另一个属性

3 align-content: 定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

定义了如果有多行的话，多行的对齐方式，比如设置为flex-start

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style type="text/css">

        .container{
            height:700px;
            width: 1000px;
            display:flex;
            background-color: yellow;
            flex-direction: row;
            flex-wrap:wrap;
            /*flex-flow:flex-direction 和flex-wrap的简写方式;*/
            /*justify-content:flex-start;*/
            /*align-items:flex-start;*/
            align-content:flex-start;
        }
        .left{
            background-color:red;
            /*flex:0.9 1 800px;*/
            /*text-align: center;*/
            /*line-height: 500px;*/
            /*vertical-align: middle;*/
            width:900px;
            height:200px;
            /*margin:0 auto;*/
        }
        .right{
            background-color:green;
            /*flex:0.1 1 100px;*/
            /*text-align: right;*/
            width:200px;
            height:200px;
        }
        </style>
</head>
<body>
    <div class=container>
        <div class='left'>left</div>
        <div class='right'>right</div>
    </div>
</body>

可以copy我的代码 自己都换换，理解更加深入

4 flex-flow: flex-direction 和 flex-wrap 的简写形式 不再赘述

5  justify-content：定义了项目在主轴的对齐方式。 以space-around为例

justify-content: flex-start | flex-end | center | space-between | space-around;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style type="text/css">

        .container{
            height:300px;
            width: 1000px;
            display:flex;
            background-color: yellow;
            flex-direction: row;
            flex-wrap:nowrap;
            /*flex-flow:flex-direction 和flex-wrap的简写方式;*/
            justify-content:space-around;
            /*align-items:flex-start;*/
            align-content:flex-start;
        }
        .left{
            background-color:red;
            /*flex:0.9 1 800px;*/
            /*text-align: center;*/
            /*line-height: 500px;*/
            /*vertical-align: middle;*/
            width:400px;
            height:200px;
            /*margin:0 auto;*/
        }
        .right{
            background-color:green;
            /*flex:0.1 1 100px;*/
            /*text-align: right;*/
            width:200px;
            height:200px;
        }
        </style>
</head>
<body>
    <div class=container>
        <div class='left'>left</div>
        <div class='right'>right</div>
    </div>
</body>

6. align-items: 定义了项目在交叉轴上的对齐方式

align-items: flex-start | flex-end | center | baseline | stretch;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style type="text/css">

        .container{
            height:300px;
            width: 1000px;
            display:flex;
            background-color: yellow;
            flex-direction: row;
            flex-wrap:nowrap;
            /*flex-flow:flex-direction 和flex-wrap的简写方式;*/
            justify-content:space-around;
            align-items:center;
            /*align-content:flex-start;*/
        }
        .left{
            background-color:red;
            /*flex:0.9 1 800px;*/
            /*text-align: center;*/
            /*line-height: 500px;*/
            /*vertical-align: middle;*/
            width:400px;
            height:100px;
            /*margin:0 auto;*/
        }
        .right{
            background-color:green;
            /*flex:0.1 1 100px;*/
            /*text-align: right;*/
            width:200px;
            height:200px;
        }
        </style>
</head>
<body>
    <div class=container>
        <div class='left'>left</div>
        <div class='right'>right</div>
    </div>
</body>

 接下来是项目属性

1 order 项目 的顺序 ，越小越靠前

比如设置order之后，可以把上面的左右反过来

flex属性 

  1. flex-basis
  2. flex-grow
  3. flex-shrink

 这3个可以简写为flex，一起说

flex: <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

flex-grow和flex-shrink都是 当项目主轴(row主轴为行方向，column主轴为列方向) 长度加起来大于或者小于容器长度时所做的调整比例，而flex-basis就是用来计算项目主轴上的长度的，当设置flex-basis后，width或height一定有一个失效（哪个失效取决于那个是主轴）

比如当设置的参数如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style type="text/css">

        .container{
            height:300px;
            width: 1000px;
            display:flex;
            background-color: yellow;
            flex-direction: row;
            flex-wrap:nowrap;
            /*flex-flow:flex-direction 和flex-wrap的简写方式;*/
            /*justify-content:space-around;*/
            /*align-items:center;*/
            /*align-content:flex-start;*/
        }
        .left{
            background-color:red;
            /*flex-basis:700px;*/
            flex:0.9 1 800px;
            /*text-align: center;*/
            /*line-height: 500px;*/
            /*vertical-align: middle;*/
            width:400px;
            height:100px;
            /*order:2;*/
            /*margin:0 auto;*/
        }
        .right{
            background-color:green;
            flex:0.1 1 100px;
            /*text-align: right;*/
            width:200px;
            height:200px;
            /*order:1;*/
        }
        </style>
</head>
<body>
    <div class=container>
        <div class='left'>left</div>
        <div class='right'>right</div>
    </div>
</body>

由于是row方向则主轴为行方向，设置flex-basis后则width失效，容器宽度1000，left800，right100，left，right加起来不够1000，则flex-grow生效，1000-（100+800）=100 需要再加上100正好充满一行，则left填充长度100*0.9=90，right填充长度100*0.1=10长度，left最终长度一共为800+90=890，right为100+10=110

 f

flex-grow和flex-shrink一定只有一个可以生效 ，或者都不生效

 

 

示例1：

qq_652530495
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flex布局实战搭建网页页面
01-03
html+css，使用flex布局搭建页面，纯前端，初学党可借鉴学习如何使用flex布局页面
div的flex布局，简单介绍
zp315379004的博客
05-31 1704
.main-box{ display: flex; flex-direction: row; align-items: center; justify-content: center; }
Flex布局
pscool的博客
05-11 3773
笔记来源：尚硅谷 Web 前端 HTML5&CSS3 初学者零基础入门全套完整版 文章目录弹性盒简介1、基本概念弹性盒弹性容器弹性元素2、弹性容器的属性主轴属性排列方式：flex-direction自动换行：flext-wrap简写属性：flex-flow空白空间：justify-content辅轴属性辅轴对齐：align-items空白空间：align-content3、弹性元素的属性伸展系数：flex-grow缩减系数：flex-shrink基础长度：flex-basis简写属性：flex排.
Flex布局 （上万字）超详细讲解 这篇就够了
程序员碎像的博客
02-12 5365
Flex布局，全称为“Flexible Box Layout”，意为“弹性盒布局”。它是一种现代的CSS布局模式，旨在提供一种更有效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小未知或动态变化。灵活性：Flex布局允许项目在容器中灵活地扩展和收缩，以填充可用空间或调整大小以适应内容。对齐方式：Flex布局提供了各种对齐选项，可以轻松地实现水平和垂直对齐。方向控制：可以方便地改变主轴的方向，使项目在水平或垂直方向上排列。空间分配。
html div flex,CSS中flex布局详解
weixin_31885875的博客
06-16 2588
1.浏览器flex兼容申明dispaly:flex;display:-webkit-flex;display:-ms-flex;display:-moz-flex;display:-o-flex;运用flex.min.css，可以让移动端主流浏览器兼容flex，适用于(jquery/zepto/angular框架)运用data-flex.min.css，可以让移动端主流浏览器兼容flex，适用于(...
div、Flex、element-ui-layout页面布局
长不大的大灰狼
04-15 4954
div页面布局一、页面布局标签属性二、定位属性三、盒子模型 一、页面布局标签属性 1、标签 无意义块状标签<div></div 无意义行内元素标签<span></span> 段落标签<p></p> 无序列表<ul></ul> 列表项<li></li> 超链接标签<a></a> 图片标签<img/> 斜体标签<i></i> 粗体标签&lt
div居中的优雅写法：flex布局
weixin_41174502的博客
03-31 2375
以前一直对div居中这个问题感到很麻烦，一般都是通过margin来实现居中的，然而还要算半天，今天get到了一种新方法，哈哈哈哈，特此记录： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content...
flex仿微博布局实战+代码
12-05
flex仿微博布局实战+代码HTML+CSS+FLEX
弹性布局-flex布局.zip
05-18
移动web端之flex布局笔记，包含案例和实战代码
移动web 第四天flex布局、实战演练小兔仙
12-25
移动web flex布局、实战演练小兔仙
Flex布局全面介绍
qq_59305028的博客
07-17 7378
Flex基本介绍
flex弹性布局
温柔雨哥的博客
12-26 558
1. 传统布局和flex布局 1.1 传统布局 兼容性好 布局繁琐 局限性，对移动端的支持不好 1.2 flex弹性布局 操作方便，布局极为简单，移动端应用广泛 PC段浏览器支持情况较差 IE11或更低版本，不支持或部分支持 建议： PC端页面，使用传统布局 移动端页面或者不考虑兼容性问题的PC端页面布局，使用flex弹性布局 2. 体验flex弹性布局带来的变化 html 代码 &l...
flex布局的常见属性
wind的博客
05-17 428
父项属性 flex-direction flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的。 flex-direction 的取值： 举例说明： <div> <span>1</span> <span>2</span> <span>3</span> </div> ①父元素不设置flex-direction时，默认水平方向为主轴，元素从左向右排列
html页面flex布局div宽度包括边框边距
ErskineWu的博客
04-18 850
flex换行左对齐 DOM结构 <div class="Box1"> <div class="Box2"> <div class="Box3">1</div> </div> <div class="Box2"> <div class="Box3">2</div> </div>
Flex布局实践
老实敲代码，佛只渡有缘人
05-20 1049
1.什么是flex布局，它能做什么 flex布局翻译为弹性布局，就是会根据外层容器的变化，呈现不同状态，使布局更加灵活方便，任意一个容器都可以被定义为flex布局，我们在平常开发中，移动端使用多一些，像水平排列的导航栏，还有页面上的元素布局，都可以使用flex布局。 看了一些文档，我们照猫画虎，也从它的6个属性出发实践一下，GO！！ 注：六个属性分别是---flex-direction、flex-wrap、flex-flowjustify-content、align-items、align-cont.
flex属性详情
july_29的博客
02-23 179
flex基本概念 给主盒子设置display：flex；属性以后，该盒子就会变成一个flex容器，容器里面的内容成为flex元素。 未设置flex： <div class="container"> <div class="item">12</div> <div class="item">34</div> <div class="item">56</div>
三步教会你flex弹性盒子（初学者也能学会）
rousongxiaobei_的博客
07-18 2074
二三开启flex布局只需要在外层容器设置display:flex即可。设置后找个外层容器就是一个flex容器。所有子容器自动成为容器成员，称为flex项目。开启flex后，里面的flex项目会自动按照main-axis水平布局。
html div flex,div+flex移动端布局
weixin_29305337的博客
06-16 925
移动端布局1.我们要进行移动端页面的开发设计第一肯定想到的是弹性盒子2.弹性盒子flex3.div和flex的配合使用移动端页面1.移动端需要引入一个样式，meta 随便打开一个网站F12调成手机模式，复制meta2.弹性盒子一个div设置了display: flex; 就成了一个弹性盒子因此我们把移动端界面布局称为div+flex布局flex水平和垂直对齐方式Documentul {mar...
CSS常用布局二（flex布局）
BreenCL的博客
07-20 2712
flex布局 前言：flex是flexible box的缩写，译为“弹性布局”，用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局，只需要设置“display:flex"即可；行内元素可以通过设置”display:inline-flex“实现；需要注意的是，如果设置了flex布局，则子元素的float、clear和vertical-align属性将失效； 1.基本概念 使用了flex布局的元素，称为flex容器（flex container），简称为”容器“。它所有的子元素自动生成容器成员，
主流布局 flex布局
最新发布
04-25
Flex布局（也称为弹性布局）是种主流的CSS布局方式，它可以方便地实现页面元素的自适应和排列。Flex布局通过定义容器和子元素的属性来实现灵活的布局效果。 在Flex布局中，有两个重要的概念：容器和子元素。容器是...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值