css弹性布局的方式

已于 2023-08-25 01:49:54 修改
阅读量909 收藏 1
点赞数
分类专栏： 前端面试 文章标签： css 前端 html
于 2023-08-23 14:16:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42611113/article/details/132450809
版权

概述

任何一个容器都可以定义为弹性布局容器，使用display:flex(display:inline-flex)开启弹性布局。

2个方向轴：水平主轴和垂直交叉轴

6个容器属性

1.flex-direction ：主轴的方向

2.justify-content：子元素在主轴的对齐方式

3.flex-wrap:：一条轴线排不下是否换行

4.flex-flow: flex-direction和flex-wrap的组合简写

5.align-items：子元素在交叉轴的对齐方式

6.align-content：多条轴线的对齐方式

参考

flex 布局的基本概念 - CSS：层叠样式表 | MDN

Flex 布局教程：语法篇 - 阮一峰的网络日志

flex弹性布局 动画详解系列 css科普教程_哔哩哔哩_bilibili

恰恰兄
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 弹性布局
stanwuc的博客
01-10 334
弹性布局
css弹性布局
weixin_51740093的博客
08-11 152
01_父元素上的属性_justify-content /* 启用弹性布局 */ display: flex; justify-content 用于控制子元素在父元素主轴(默认是水平从左向右)的排列以及分布 取值： flex-start 靠近主轴的起点 center 在主轴的中间对齐 flex-end 靠近主轴的终点 space-between 等距分隔 space-around 等距环绕 space-evenly 平均分 小结： justi...
CSS弹性布局
weixin_45203607的博客
04-30 8159
title: CSS弹性布局 abbrlink: 31146 date: 2020-07-22 13:09:38 author: 胡安民 toc: true top: false cover: false summary: categories: Web reprintPolicy: cc_by keywords: 弹性布局概念,flex-direction,flex-wrap, justify-content,align-items,align-content tags: CSS CSS-弹性布局.
21.6 CSS 弹性布局
10-07
综上所述，CSS弹性布局（Flexbox）提供了一套完善的解决方案，帮助开发者构建更具灵活性和响应性的网页布局。通过理解并熟练运用Flexbox的相关属性，你可以创建出更加高效、美观且适应性强的网页设计。在实际开发中...
CSS弹性布局（排列方式、项目换行、主轴对齐方式）
lixiuyuanNo的博客
08-16 1436
在弹性布局里，父元素称为容器，子元素称为项目。项目排列由容器控制，控制属性都写在容器里。要使用弹性布局，要先使父元素display:flex; 例：以下写了项目的排列方式、项目换行、项目的对齐方式 <!-- HTML --> <div class="baba"> <div>1</div> <div>2</div> <div>3</div> <div>4</d
Css 弹性布局（Flex）详细介绍（Flex 属性详解、场景分析）
2401_84152825的博客
04-19 961
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。[外链图片转存中…(img-giLHKEZa-1713474385859)]
10分钟理解CSS3 FlexBox弹性布局
09-22
CSS3中的FlexBox是一种强大的布局模型，它可以让开发者更简单高效地设计出具有弹性、适应不同屏幕尺寸的Web布局。在FlexBox模型中，所有的元素都位于一个flex container（弹性容器）内，该容器能够控制其子元素...
CSS3弹性布局内容对齐（justify-content）属性使用详解
01-19
注意：弹性布局中有两个基本术语main axis和cross axis，一般情况下，我们可以把它们各自看作是屏幕上的行向和列向（但是严格讲，这和写模式以及弹性流方向有关）。 那么main-start和main-end就可以分别被看作是弹性...
CSS行元素的截断样式box-decoration-break属性，有点儿意思！
流绪@微梦
09-03 624
在CSS中，行元素默认情况下，行内元素不会独占一行，而是在一行内根据其内容的大小进行排列。行内元素的宽度和高度由其内容决定，不能直接设置宽度和高度。行内元素不能包含块级元素，只能包含其他行内元素或文本。行内元素可以设置水平方向的边距（margin）和内边距（padding），但不会影响到其他元素的布局。常用行内元素：a、span、i、em、strong、img等。
从零开始：我的JaveWeb学习笔记之网页设计初探：探索 HTML 、CSS的奇妙世界（JavaWeb、HTML、CSS）
Hanbuhuic的博客
09-04 1580
HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。它定义了网页的结构和内容，但不包括样式和行为。HTML 由一系列的元素组成，这些元素可以被浏览器识别并渲染成可视化的网页。CSS（层叠样式表，Cascading Style Sheets）是一种用于描述HTML或XML文档的样式表语言。它能够控制网页的布局、颜色、字体以及其他视觉和版式特性。CSS 允许开发者将页面的内容（HTML）与页面的表现（CSS）分离，这样可以更灵活地进行设计和维护。
css spacing设置间距
时间不说谎
09-03 368
将在每个单词之间增加30像素的间距。这个属性可以增加或减少字与字之间的空白，并且允许负值，即减少字与字之间的间距。将在每个字母之间增加10像素的间距。这个属性会影响一个单词中每个字母之间的间距，使得单词中的字母之间也有空白。属性用于设置单词之间的间距。它只影响英文单词之间的间距，对中文无效。属性用于设置字母之间的间距，适用于中文和英文。
css radius
时间不说谎
09-03 694
在 css 中，radius 属性用于设置元素角落的圆角半径，以创建更美观的现代化外观。属性值包含绝对长度或百分比，或继承父元素的半径。指定一个值会影响所有四个角，指定两个值会分别影响左上角和右下角、右上角和左下角的半径。Radius 是 CSS 中的一个属性，它允许开发者对元素的角落进行圆角处理。它为元素创建圆角边框，使元素看起来更加美观和现代。radius 属性在所有现代浏览器中都得到广泛支持，包括 Chrome、Firefox、Safari、Edge 和 Opera。
HTML标签大合集
2302_78656999的博客
09-02 348
本文详细介绍常用的HTML标签及其用法
VitePress 自定义 CSS 指南
最新发布
软考鸭
09-06 513
首先，在你的 VitePress 项目中，创建一个自定义 CSS 文件。例如，在目录下创建一个名为custom.css的文件。接下来，你需要在自定义主题入口文件中引入这个 CSS 文件。如果你的项目结构遵循 VitePress 的默认布局，这个文件通常是。import './custom.css' // 引入自定义 CSS。
【vue css】css字体设置渐变色
weixin_41747256的博客
09-04 430
css字体设置渐变色
CSS实现DIV水平展示
weixin_43159039的博客
09-03 668
1、Flexbox 方法：使用来创建一个弹性盒子布局。用于在主轴上均匀排列两个 div。每个 div 设定了宽度和边框样式。2、使用Flexbox对多个div的水平排列比float简单。
前端：HTML、CSS、JS、Vue
云扬的博客
09-04 3462
本文主要介绍了HTML、CSS、JavaScript、Vue的基本语法和使用。供个人学习使用
快速掌握CSS3 FlexBox弹性布局
"这篇文章主要介绍了如何在10分钟内理解CSS3 FlexBox弹性布局，包括其基本概念、特点、工作原理以及如何通过设置不同的属性来实现各种布局效果。" CSS3 FlexBox弹性布局是现代网页设计中一种强大的布局工具，它简化...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值