W3C推荐的新布局模式 【CSS Flex布局】详解

简介: W3C推荐的新布局模式 【CSS Flex布局】详解

概述


flex 布局模型中,flex 容器的子级可以在任何方向上布局,并且可以“伸缩”它们的大小,要么增长以填充未使用的空间,要么缩小以避免溢出父级。孩子的水平和垂直对齐都可以很容易地操作。这些框的嵌套(水平内垂直,或垂直内水平)可用于构建二维布局。


CSS 灵活框布局模块 Level 1 – W3C 候选人推荐


在真正了解之前,我一直使用float进行布局,但了解了Flex布局之后,发现它是个超好用的排版工具,也是它拯救了我,用它来做网页非常容易达到响应式,因为它有极强大的适应能力,可以随着网页缩放去改变比例。


flex 布局背后的主要思想是:让容器能够改变其项目的宽度/高度(和顺序)以最好地填充可用空间(主要是为了适应各种显示设备和屏幕尺寸)。


Flex 布局表面上类似于块布局、常规布局(基于垂直的块和基于水平的内联)。它缺少许多可用于块布局的更复杂的以文本或文档为中心的属性,例如floats和columns。但似乎最重要的是,与常规布局相反,Flex布局与方向无关。Flex可用于Web 应用程序和复杂的网页,通可以自由分配空间和对齐内容。


但在大型的布局情况下我更推荐Grid网格布局。当然在我们还没学习到的情况下不需要考虑这些


我们可以看到CSDN使用了Flex布局


21.png

那么在了解了这么多信息之后,现在我们可以开始正式学习Flex布局了


属性

弹性容器的属性(父级)

display

display:flex 定义了一个弹性容器;内联或块取决于给定的值。它为所有直接子级启用了弹性上下文。


如果你想要flex的布局生效就需要提前给父元素设置 display:flex


.content{
  display:flex
}

我们看一个示例


<style>
        .content {
            display: flex;
        }
        .box-parent{
            width: 100%;
            border: 1px red solid;
            margin-bottom: 10px;
        }
        .box {
            width: 200px;
            height: 100px;
            background-color: black;
            margin: 10px;
            color: aliceblue;
        }
    </style>
    <!-- 添加的情况 -->
    <div class="box-parent content">
        <h1>display: flex</h1>
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
    <!-- 正常的情况 -->
    <div class="box-parent">
        <h1>正常情况</h1>
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>

你能发现区别吗 ?


22.png



flex-direction

flex-direction 决定了弹性方向,它建立了主轴,从而定义了弹性项目放置在弹性容器中的方向。


Flex 是一个单向布局概念。将弹性项目视为主要以水平行或垂直列布局。


.content{
  flex-direction: row | row-reverse | column | column-reverse;
}


  • row(默认):从左到右
  • row-reverse :从右到左
  • column : 从上到下
  • column-reverse : 从下到上


在设置了 flex-direction 之后因为默认是flex-direction:row ,这就是为什么前面的 display:flex 会默认排成一列,从左到右


23.png


flex-wrap

flex-wrap 用于包装盒子,默认情况下,弹性项目都会自己主动组合成一行。


我们可以更改它并允许使用此属性根据需要的来包装项目。

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}
  • nowrap(默认):所有弹性项目都将在一行,当宽度不够时则会压缩空间
  • wrap : 项目将从上到下包裹成多行,当宽度不够时则会将最右边的项目向下换行
  • wrap-reverse : 项目将从下到上换行成多行。当宽度不够时则会将最左边的项目向上换行



24.png


flex-flow

flex-flow 用于设置盒子的弹性流动.


这是 flex-directionandflex-wrap 属性的简写,它们共同定义了 flex 容器的主轴和交叉轴。默认值为 row nowrap 。


属性的值的效果和上面的 column 是一样的,该属性将 flex-directionan 与 flex-wrap 进行了组合。

你可以这样使用,将两个值放一起


.content{
  flex-flow: nowrap row-reverse;
}

justify-content

justify-content 定义了沿主轴的对齐方式。


当一行上的所有 flex 项目都不灵活,或者是灵活的但已达到最大大小时,它有助于分配额外的可用空间。


当项目溢出行时,它还会对项目的对齐方式施加一些控制。

.content{
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}


  • flex-start(默认):从 flex-direction定义的位置的开始。
  • flex-end : 从 flex-direction定义的位置末尾开始。
  • start : 在方向的开始处 writing-mode。
  • end : 方向的尽头处 writing-mode。
  • left : 在容器的左边缘,除非特殊的的要求,否则没有意义,就像start一样。
  • right : 在容器的右边缘,除非特殊的的要求,否则没有意义,就像end一样。
  • center :项目沿线居中
  • space-between :均匀分布在行中;第一项在起始行,最后一项在结束行
  • space-around :均匀分布在行中,周围空间相等。请注意,视觉上的空间是不相等的,因为所有项目的两边都有相等的空间。第一个项目将在容器边缘有一个空间单位,但下一个项目之间有两个空间单位,因为下一个项目有自己的适用间距。

space-evenly :使得任何两个项目之间的间距(以及边缘的空间)相等。


25.png


这里穿插一个重要的知识点


  • safe : 使用后会变成安全对齐,“安全” 的对齐方式在溢出时改变了对齐模式,以避免数据丢失。
  • unsafe: 则关闭安全对其

例如

justify-content: safe center;

但在使用中会有浏览器兼容性问题,所以我们只要在 flex 子元素上应用 margin: auto ; 即可解决问题,不需要用 safe 关键字




align-items

align-items 定义了弹性项目如何沿当前行的交叉轴布局的默认行为。将其视为justify-content横轴(垂直于主轴)的版本。


你可以理解为水平位置

.content {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}
  • stretch(默认):拉伸以填充容器(仍然遵守最小宽度/最大宽度)。
  • flex-start、start : 放置在横轴的开始处。
  • flex-end、end : 放置在横轴的末端。
  • center :在横轴上居中
  • baseline :对齐,例如基于文字基线对齐


26.png



align-content

align-content 用于对齐内容,当横轴上有额外空间时,将对齐 flex 容器的线,类似于在 justify-content 主轴内对齐单个项目的方式。


那么 align-content 有什么特点呢?和 align-items 有什么区别呢?


align-content 属性只对多行灵的活容器生效,这里 flex-wrap 设置为wrap)。align-content 在单行灵活容器下(即 whereflex-wrap设置为其默认值no-wrap)不会生效。


也就是说 align-items 的设置对象是行内成员; align-content 的设置对象是所有行,且只有在多行弹性盒子容器中才生效。


当然 align-content 的前提是这一个容器整体定义了一个高度

.content {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}
  • normal(默认):默认位置,就好像没有设置一样。
  • flex-start、start :在容器的开头。
  • flex-end、end :在容器的末端。
  • center :在容器中居中。
  • space-between :均匀分布;第一行在容器的开头,最后一行在结尾。
  • space-around :在每行周围均匀分布。
  • space-evenly :均匀分布,周围空间相等
  • stretch : 线条伸展以占用剩余空间


27.png



gap, row-gap, column-gap

gap 属性明确控制弹性项目之间的空间。


注意是弹性项目之间的,不影响盒子边缘,和 margin 是有明显区别的。

.content{
  display: flex;
  ...
  /* 行间距/列边距 统一设置 */
  gap: 5px; 
  /* 行间距/列边距 分开设置 */
  gap: 5px 10px; 
   /* 行间距/列边距 独立设置 */
  row-gap: 5px;
  column-gap: 10px;
}

它不仅适用于 flexbox,gap 适用于网格和多列布局。



28.png


弹性项目的属性(子项)

order

默认情况下,弹性项目按原顺序排列。但是,order 属性控制它们在弹性容器中出现的顺序。


.item {
  order: 2; /* 默认是 0 */
}

具有相同order 的节点会恢复到原来的排列。


我们可以看下面这个例子,认真思考

<style>
    .box-parent{
        display: flex;
        width: 100%;
        border: 1px red solid;
        margin-bottom: 10px;
    }
    .box-parent > div {
        width: 200px;
        height: 100px;
        background-color: black;
        margin: 10px;
        color: aliceblue;
    }
</style>
<div class="box-parent">
    <div style="order: 1;">1 <p>order:1</p></div>
    <div style="order: 1;">2 <p>order:1</p></div>
    <div style="order: 2;">3 <p>order:2</p></div>
    <div style="order: -1;">4 <p>order:-1</p></div>
</div>


flex-grow

flex-grow 定义了弹性项目在必要时扩大/增长的能力。


它适合无单位的项目,它规定了项目应该占用的弹性容器内的可用空间量。


如果所有项目的 flex-grow 都设置为1,则容器中的剩余空间将平均分配给所有子项。如果其中一个项目的值为2,则该项目将占用其他项目之一的两倍空间(或者至少会尝试)。


.item {
  flex-grow: 2; /* 默认 0 负数无效。*/
}

你可以自己试一下下面这个例子


<style>
    .box-parent{
        display: flex;
        width: 100%;
        border: 1px red solid;
        margin-bottom: 10px;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: black;
        margin: 10px;
        color: aliceblue;
    }
</style>
<div class="box-parent">
    <div class="box" style="flex-grow: 1;">1</div>
    <div class="box" style="flex-grow: 4;">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
</div>


flex-shrink

flex-shrink 定义了弹性项目在必要时收缩的能力。


.item {
  flex-shrink: 3; /* 默认是 1 */
}

注意区分, flex-grow 用于提高优先增长能力,而 flex-shrink 则是提高优先伸缩能力




flex-basis

flex-basis 定义了在分配剩余空间之前元素的默认大小。它可以是长度(例如 10%、2rem 、100px等)或关键字。


.item {
  flex-basis:  | auto; /* 默认 auto */
}


flex

flex 是 flex-grow , flex-shrink 和 flex-basis 组合的简写。


第二个和第三个参数 ( flex-shrink 和 flex-basis ) 是可选的。


默认值为 0 1 auto ,但如果使用单个数值,例如 flex: 3 ,它就像设置 flex-grow: 5; flex-shrink: 1; flex-basis: 0% 。


.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}



align-self

align-self 会覆盖已有的 align-items 的值,两者的可取值完全一样。


两者的区别在于:伸缩容器内部某个元素在排列方式需要有所差异,此时就不能使用

align-items ,因为 align-items 作用于整体,我们希望作用于部分,这就是 align-self 的作业。





示例

一个简单的菜单栏示例


<style>
    * {
        margin: auto;
        padding: 0;
    }
    header {
        width: 90%;
        min-width: 600px;
        height: 55px;
        background-color: rgba(0, 0, 0, 0.062);
        border-radius: 0 0 20px 20px;
    }
    .list {
        display: flex;
        height: 100%;
    }
    .list>li {
        flex-basis: 80px;
        text-align: center;
        list-style: none;
    }
    .logo {
        flex-grow: 0.5;
    }
</style>
<header>
    <ul class="list">
        <li class="logo">
            <div> LOGO </div>
        </li>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Page</a>
        </li>
        <li>
            <a href="#">More</a>
        </li>
        <li>
            <a href="#">About</a>
        </li>
    </ul>
</header>
相关实践学习
基于ACK Serverless轻松部署企业级Stable Diffusion
本实验指导您在容器服务Serverless版(以下简称 ACK Serverless )中,通过Knative部署满足企业级弹性需求的Stable Diffusion服务。同时通过对该服务进行压测实验,体验ACK Serverless 弹性能力。
深入解析Docker容器化技术
Docker是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化,容器是完全使用沙箱机制,相互之间不会有任何接口。Docker是世界领先的软件容器平台。开发人员利用Docker可以消除协作编码时“在我的机器上可正常工作”的问题。运维人员利用Docker可以在隔离容器中并行运行和管理应用,获得更好的计算密度。企业利用Docker可以构建敏捷的软件交付管道,以更快的速度、更高的安全性和可靠的信誉为Linux和Windows Server应用发布新功能。 在本套课程中,我们将全面的讲解Docker技术栈,从环境安装到容器、镜像操作以及生产环境如何部署开发的微服务应用。本课程由黑马程序员提供。 &nbsp; &nbsp; 相关的阿里云产品:容器服务 ACK 容器服务 Kubernetes 版(简称 ACK)提供高性能可伸缩的容器应用管理能力,支持企业级容器化应用的全生命周期管理。整合阿里云虚拟化、存储、网络和安全能力,打造云端最佳容器化应用运行环境。 了解产品详情: https://www.aliyun.com/product/kubernetes
目录
相关文章
flex布局属性简介
flex布局属性简介
|
8天前
|
弹性计算 前端开发 容器
【前端web入门第六天】02 flex布局
Flex布局是一种现代CSS布局模式,通过给父元素设置`display: flex`,其子元素可自动挤压或拉伸。它包含弹性容器和弹性盒子,主轴默认为水平方向,侧轴为垂直方向。主轴对齐方式由`justify-content`属性控制,侧轴对齐方式包括`align-items`(针对所有子元素)和`align-self`(针对单个子元素)。修改主轴方向使用`flex-direction`属性,`flex`属性用于控制子元素在主轴上的伸缩比例。此外,`flex-wrap`属性允许子元素换行,而`align-content`属性则定义多行对齐方式。
|
1月前
|
前端开发
FLex布局详解
Flex布局通过`flex-direction`定义主轴方向,包括横向`row`、反向横向`row-reverse`、纵向`column`及反向纵向`column-reverse`。`justify-content`控制主轴上子元素的排列,如起始端`flex-start`、末端`flex-end`、居中`center`、等间距`space-around`或两端对齐`space-between`。在Y轴上设置这些同样有效。`flex-wrap: wrap`使子元素在需要时换行。`align-items: center`实现侧轴(交叉轴)上的居中对齐
46 1
FLex布局详解
|
22天前
|
前端开发 安全 容器
CSS如何优雅实现卡片多行排列布局?
【8月更文挑战第24天】CSS如何优雅实现卡片多行排列布局?
37 3
|
22天前
|
前端开发 开发者 容器
探索现代Web开发中的CSS Grid布局技术
【8月更文挑战第29天】在数字时代的浪潮中,网页设计不断进化以适应日新月异的用户需求。CSS Grid布局技术作为一项革新性的前端工具,为设计师和开发者提供了前所未有的布局能力。本文旨在通过深入浅出的方式介绍CSS Grid的核心概念、基本用法以及在实际项目中的应用,帮助读者快速掌握这一强大的网页布局工具。
40 3
|
22天前
|
JavaScript
Vue3弹性布局(Flex)
这是一个基于 Vue 的弹性布局组件库,提供了丰富的参数配置,如宽度、方向、换行等,支持自定义对齐方式和间隙设置。在线预览展示了不同布局效果,包括单选、按钮和滑动输入条等组件的使用示例。
Vue3弹性布局(Flex)
|
26天前
|
前端开发 开发者 容器
【Web布局的革命】探索CSS Grid栅格系统,打造未来网页设计!
【8月更文挑战第25天】在网页设计领域,布局至关重要。传统的布局方法难以满足复杂需求,CSS Grid 栅格系统因此诞生。它是一种二维布局模式,能直接控制行和列,简化复杂网格的设计。通过定义 `display: grid;` 创建网格容器,并利用 `grid-template-columns` 和 `grid-template-rows` 设置行列尺寸,轻松实现响应式布局。此外,CSS Grid 支持高级功能,如网格区域划分和对齐设置,极大提升了布局的灵活性和创意空间。随着浏览器兼容性的增强,CSS Grid 必将成为未来网页设计的关键技术之一。
49 1
|
1月前
|
前端开发 JavaScript Serverless
揭秘CSS布局神器:vw/vh、rem、%与px大PK,掌握它们,让你的网页设计秒变高大上,面试难题迎刃而解!
【8月更文挑战第4天】在Web开发中,合理选择CSS单位对响应式布局至关重要。本文探索viewport单位(vw/vh)、rem、百分比(%)及像素(px)的基础知识与应用场景。通过代码示例,展示如何运用这些单位实现全屏布局、尺寸比例调整、灵活的元素大小及固定尺寸。最后,模拟面试题,介绍如何仅用CSS实现一个元素的高度为其宽度两倍且响应视口变化的方法。
142 8
|
30天前
|
前端开发 容器
掌握弹性盒子布局(Flex):打造灵活的网页布局
掌握弹性盒子布局(Flex):打造灵活的网页布局
|
1月前
|
容器