【Web前端】CSS3 (Flex Box)弹性盒子详解

最新推荐文章于 2024-06-14 09:42:20 发布

呆小杰

最新推荐文章于 2024-06-14 09:42:20 发布

阅读量2.1k

点赞数 2

文章标签： css3 css 前端框架前端

本文链接：https://blog.csdn.net/m0_72416767/article/details/125507856

版权

大家好，我是呆小杰，一名前端爱好者，今天用一篇文章带大家认识CSS3弹性盒子。

文章目录

前言

弹性盒子是一种新类型的盒子模型，也有书上称作弹性伸缩盒布局，旨在提供一个更加有效的方式来布置，对齐和分布在容器之间的各项内容，即使它们的大小是未知或者动态变化的。
弹性布局的主要思想是让容器有能力来改变项目的宽度和高度，以填满可用空间（主要是为了容纳所有类型的显示设备和屏幕尺寸）的能力。

应用恰当的弹性布局对用户十分友好。页面中所有元素可以随着用户的偏好缩放。

对于同时喜欢流动和定宽布局的设计师来说，弹性布局是完美的，因为前两种布局的优点在弹性布局中都能找到。

正文

一、CSS3弹性盒子内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。

注意：弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
以下元素展示了弹性子元素在一行内显示，从左到右:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
 
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
 
<div class="flex-container">
  <div class="flex-item">flex i

最低0.47元/天解锁文章

呆小杰

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
【Web前端】CSS3 (Flex Box)弹性盒子详解

弹性盒子是一种新类型的盒子模型，也有书上称作弹性伸缩盒布局，旨在提供一个更加有效的方式来布置，对齐和分布在容器之间的各项内容，即使它们的大小是未知或者动态变化的。弹性布局的主要思想是让容器有能力来改变项目的宽度和高度，以填满可用空间（主要是为了容纳所有类型的显示设备和屏幕尺寸）的能力。注意：弹性容器外及弹性子元素内是正常渲染的。......
复制链接

扫一扫