Flex布局--父项常见属性

最新推荐文章于 2023-06-07 09:24:16 发布
最新推荐文章于 2023-06-07 09:24:16 发布
阅读量434 收藏
点赞数
分类专栏： css flex布局 文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hanrabbit/article/details/111942220
版权
本文介绍了Flex布局的基础用法，包括开启Flex布局的关键属性`display:flex;`，并详细阐述了父项的常见属性，如`flex-direction`、`justify-content`、`flex-wrap`、`align-items`和`align-content`，帮助开发者掌握弹性布局的灵活应用。
摘要由CSDN通过智能技术生成

文章目录

前言

flex 是常用的 css3 布局方式，可以用少量的代码高效的实现各种页面布局，是一个基础的但是必须会的基本技能

一、Flex布局是什么？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

二、基础用法

1.display:flex;

如果你想用flex布局，首先得在父盒子里填写 display:flex;属性,来控制子盒子的属性和排列方式。

<div>
	<span>1</span>
	<span>2</span>
	<span>3
最低0.47元/天 解锁文章
爱喝奶茶的小韩
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flex布局-父项常见属性
WangZhang_521的博客
01-17 182
01-flex主轴方向 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt
vue-layout-diy:基于vue和flex的自定义布局
05-16
vue-layout-diy 基于vue和flex的自定义布局，。 S前缀为Sunflower简写，我们团队的命名空间。 项目步骤 使用vue-cli@2.9.3初始化项目； vue init webpack vue-layout-diy 根据个人/团队代码规范，配置eslint； 安装； 完成基于flex布局的组件SGrid SGridItem； 引入Element，完成SEmpty默认显示块； 异步组件配合代码分离时: 若使用插件的形式，s-empty在dev模式下渲染正常，在buid模式下无法渲染。 在main.js中通过Vue.component直接注册则正常。 为了方便在GithubPage展示效果，将build后dist中的结果拷贝至demo目录，并修改资源路径。 由于demo并非部署在Web服务器根目录下，所以分离的异步js文件找不到。 需要修改config/inde
Vue项目 关于flex布局（详解）
Jiang_bug的博客
03-31 9518
Flet布局 语法（Flex 指定容器 —父元素） 首先我们需要一个总盒 注意：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 <template> <div class="box"> <div class="item"></div> </div> </template> <style scoped> .box{ // 将box指定为Flex
flex实现上中下布局
热门推荐
qq_39851888的博客
04-20 1万+
上中下、上下布局是我们网页开发中常用的布局，下面我将用flex实现这两种布局。 上中下布局 特点： 头尾固定，内容自适应 思路： 整个盒子为layout，使用flex纵向排列，宽高为100%；header和footer均为flex-shrink: 0;，强制不缩放。main的flex-grow: 2;，默认放大，且自动滚动。经过以上操作，就实现了经典是上中下布局。 布局 <div id="layout"> <header id="header">这里是头部</heade
flex布局详细介绍以及盒子上下左右居中对齐实例
m0_52743009的博客
09-29 7928
flex布局详细介绍以及盒子上下左右居中对齐实例
flex佈局之：上下，上中下，左右，左中右佈局
weixin_44763169的博客
12-08 1282
關於flex的上中下和左中右佈局技巧
Flex布局--子项常见属性
hanrabbit的博客
12-30 443
1、flex:子项目占的份数 定义子项目分配剩余空间，默认值为0 <section> <div class="item1"></div> <div class="item2"></div> <div class="item3"></div> </section> section{ width: 60%; height: 150px; background-color: pink; m
flex布局-子项常见属性
WangZhang_521的博客
01-17 231
01-flex属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
微信小程序 Flex布局-容器属性
weixin_45343878的博客
08-17 576
场景 容器与项目元素 主轴与交叉轴 容器属性 盒模型分类 盒模型分类：IE盒模型，标准盒模型，本质区别：宽高计算方式 场景 在小程序开发中，需要考虑各种尺寸终端设备上的适配。 在传统网页开发，用的是盒模型，通过display:inline | block | inline-block、 position、float来实现布局，缺乏灵活性且有些适配效果难以实现 比如下面常见的信息列表，要求内容高...
vue左右拖拽组件
君陌离的博客
09-23 1802
个人博客地址，更多精彩内容 template部分 <!-- drag --> <template> <div class="drag-box" ref="box"> <div class="left"> <!--左侧div内容--> <slot name="drag-left"></slot> </div> <div class="resize" title="收缩侧边栏"&.
Vue利用flex和grid实现圣杯布局
Lemonnnn的博客
07-08 459
什么是圣杯布局？ header和footer各自占领屏幕所有宽度，高度固定。 中间的container是一个三栏布局。 三栏布局两侧宽度固定不变，中间部分自动填充整个区域。 中间部分的高度是三栏中最高的区域的高度。 实现方法一：利用flex <template> <div class="container"> <div class="left"></div> <div class="mid"></div> <div c.
div上下左右居中
weixin_42282391的博客
03-16 4641
欢迎补充
盒子拉伸拉扯（左右模式）
仙途路漫漫其修远兮
05-25 1000
左右拉伸盒子，盒子宽度跟着变化。
VUE-flex布局之flex-wrap换行（3）
LzzMandy的博客
06-10 9044
1、外部容器display：flex； 可以设置的6个属性，如下： flex-direction 元素排列方向 flex-direction: row || row-reverse || column || column-reverse 元素排列方向: (从左往右)默认 || (从右往左) || (从上往下...
flex布局
m0_52247852的博客
03-20 1050
传统布局与flex布局 传统布局 兼容性好 布局繁琐 有局限性、不能再移动端很好的布局 flex弹性布局 操作方便、布局极为简单、移动端应用很广泛 PC端浏览器支持情况较差 IE 11 或更低版本，不支持或仅部分支持 建议： 如果是PC端页面布局，我们还是传统布局 如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是flex弹性布局 布局原理 flex是flexible Box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局 当我们为父盒
Vue项目实现自适应的左右布局和上下布局
m0_74069684的博客
06-07 5763
能看懂的小伙伴直接拿走代码，稍有疑惑的伙伴请听我解释一下，我们这里是通过行标签将需要上下布局的盒子包裹起来，然后通过列标签把列的空间分成24等份，在继续通过使用两个的方式实现上下布局。能看懂代码的小伙伴直接使用代码，稍微有些疑惑的小伙伴就来听我解释一下吧，我首先需要设置一个父盒子来包裹两个子盒子，在父盒子中设置flex布局，使用flex布局就能实现左右布局。
vue+Element UI 垂直卡片布局，使上下两个卡片有明显间隙
qq_39918566的博客
04-16 1万+
1.问题描述：上下两个卡片老是找不到办法来变成像右边红框这种显示？ 2.解决方式： 整体思路，在卡片的上一级设置布局元素的排布（这里要的是垂直），然后设置局部样式，在CSS部分加上一个下外边距(margin-bottom)；内边距只影响卡片本身，会在卡片上有更多的留白部分而已。 1）在控制卡片的布局列的部分加上一个class，然后设置它让它按列分布； <el-row :gutter="20"...
前端学习笔记—弹性盒子
hu2600的博客
10-30 1238
弹性盒子父元素中的属性弹性盒子的元素对齐排列排列方式对齐方式换行方式子元素的属性弹性收缩与扩大重新排列项目单独调整每个项目的对齐 &lt;div id="div-contain"&gt; &lt;div id="first"&gt;&lt;/div&gt; &lt;div id="second"&gt;&lt;/div&gt; &lt;/div&gt;
flex布局常见父项属性
最新发布
07-28
回答: flex布局常见父项属性有以下几种：flex-flow、flex-direction。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* *2* [Web前端培训：flex布局中父元素常用属性总结]...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值