Flex弹性布局的用法+圣杯布局

最新推荐文章于 2023-05-19 22:33:06 发布

苏一恒

最新推荐文章于 2023-05-19 22:33:06 发布

阅读量347

点赞数

分类专栏：前端体系文章标签： javascript html html5 css css3

本文链接：https://blog.csdn.net/HuoYiHengYuan/article/details/104472009

版权

前端体系专栏收录该内容

32 篇文章 2 订阅

订阅专栏

Flex布局

弹性布局基本上能解决所有的布局方案。

基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size

用法

父容器：

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

定义主轴方向

flex-wrap:nowrap | wrap | wrap-reverse

定义缠绕方式，即下一行如何换行

flex-flow:<flew-direction> || <flex-wrap>

复合属性，flew-direction || flex-wrap

justify-content:flex-start｜flex-end｜center ｜space-between｜space-around

定义主轴上的对齐方式

align-items:flex-start｜flex-end｜center｜baseline｜stretch

定义交叉轴上的对齐方式

align-content:flex-start｜flex-end｜center ｜space-between｜space-around

在wrap换行后，即多根轴线的对齐方式

子元素：

order:数字表示排列顺序。数字越小，越靠前。
flex-grow:数字计算占比，基于剩余空间放大元素。默认为0。
flex-shrink:数字计算占比，基于不足空间缩小元素。默认为1。
flex-basis:初始的尺寸。相当于width/height，默认auto
flex:<flex-grow> | <flex-shrink> | <flex-basis>

复合属性，默认为“0 1 auto”

用Flex实现圣杯布局

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>弹性布局FLex--圣杯实例</title>
    <style>
        html{
            height: 100%;
        }
        body{
            height: 100%;
        }
        div{
            border: 1px solid red;

        }
        #box{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 100%;
            height: 100%;
        }
        #body{
            flex-grow: 1;
            display: flex;
            justify-content: space-between;
        }
        #middle{
            flex-grow: 1;
        }
        #left,#right{
            min-width: 23%;
        }
        #head,#foot{
            min-height: 15%;
        }
        #left,#right,#head,#foot,#middle{
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
<div id="box">
    <div id="head">头</div>
    <div id="body">
        <div id="left">左</div>
        <div id="middle">中</div>
        <div id="right">右</div>
    </div>
    <div id="foot">底座</div>
</div>
</body>
</html>

参考文章–阮一峰

苏一恒

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Flex弹性布局的用法+圣杯布局

Flex布局弹性布局基本上能解决所有的布局方案。基本概念采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start...
复制链接

扫一扫