HTML html和css中 flex 弹性伸缩 盒子属性的基本概念和简单应用 display:flex； 加强理解 具体用法和使用

最新推荐文章于 2022-05-14 11:11:05 发布
最新推荐文章于 2022-05-14 11:11:05 发布
阅读量291 收藏 1
点赞数 2
分类专栏： html 文章标签： html css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45282709/article/details/107078146
版权

flex的概念：

该属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
弹性布局 方便使用。
主要用于对div盒子的布局 大小 位置等进行方便灵活使用。
用在父子盒子关系比较多。

flex的简单应用：

首先在html中写好父子盒子
在这里插入图片描述

  1. 在head标签里写简单的style的css样式
    父标签：
    在这里插入图片描述
    需在父标签中加上display属性
    三个子标签
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

效果一：

自动float左浮动。
在这里插入图片描述
增加一条 justify-content: center; 自动在中间
在这里插入图片描述

效果二：

在这里插入图片描述
增加一条 justify-content: space-evenly; 自动在中间有间距对齐
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
子标签改变大小比列
box1:box2的比例就是 3：1
在这里插入图片描述

在这里插入图片描述

听风无忧、落雪成眠
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML布局之flex布局
weixin_43183219的博客
01-03 8721
flex布局的功能、容器、项目、主轴、交叉轴的介绍以及对容器属性、项目属性的详细讲解、实例演示
伸缩盒布局的相关属性用法详细介绍
zhongqiu911的博客
03-22 484
@伸缩盒/弹性盒子Flexbox 伸缩盒相关属性的用法详解 伸缩盒的属性有： 容器区： 属性 值 display flex; flex-direction row;column; flex-wrap nowrap;wrap;wrap-reserve justify-content flex-start;flex-end;center;space-between;spac...
html+css:display:flex属性
weixin_42382758的博客
08-05 208
好文推荐
css flex弹性盒布局的属性
huhuhuja
08-18 188
1.使用弹性盒模型 父元素必须要加display:flex|inline-flex 2.容器属性 justify-content 主轴对齐 justify-content: flex-start左对齐 | flex-end 右对齐 | center居中 | space-between两端对齐 | space-around分散对齐 align-items 侧轴对齐（单行） align-items: start 顶端对齐 | end 底端对齐| center垂直居中 | baseline 基线对
Flex弹性盒子布局详解
柯晓楠
03-12 845
1、什么是 flex 布局 Flex 是 Flexible Box 的缩写，意为"灵活的盒子"或"弹性的盒子"，所以 flex 布局一般也叫作"弹性布局"。 2、基本概念 2.1、什么是 flex 容器（flex container）？ 采用 flex 布局的元素，称为 flex 容器： .box { display: flex | inline-flex; } 2.2、什么...
Flex 布局&&弹性盒模型属性||容器属性
pigZhangBoFei的博客
09-19 159
首先声明一个坐标轴（main axis）， 垂直方向的是交叉轴（cross axis） flex-direction 属性 主轴横向，row 项目沿主轴排序，从左到右 flex-direction:row-reverse; 主轴方向反转排序方式 项目一 以最右边为开始排序 ...
详解CSS中的display:flex||inline-flex属性
09-27
主要给大家介绍了CSS中的display:flex和display:inline-flex属性，文中分别通过两段实例代码给大家介绍了display:flex和display:inline-flex的使用效果，感兴趣的朋友们可以参考借鉴，下面来一起看看吧。
浅谈CSS3中display属性的Flex布局的方法
09-24
本文将深入探讨CSS3中`display`属性的`flex`布局方法，这是一种极具灵活性的页面布局技术，广泛应用于现代网页和应用开发，包括微信小程序的设计。`Flex布局`，全称`Flexible Box`，旨在为盒状模型提供更为便捷、...
html+css：主要运用了flex布局和绝对定位
最新发布
07-24
在HTML中，我们可以创建一个容器，并通过CSS设置`display: flex`或`display: inline-flex`来启用Flex布局。一旦启用，容器内的子元素将遵循Flexbox规则进行排列、对齐和扩展。Flex布局有以下几个关键属性： 1. `...
FlexBox弹性盒属性
LYY_record的博客
03-06 253
一、flex的容器与项目 flex容器：采用flex布局的元素的父元素 flex项目：采用flex布局的元素的父元素的子元素 二、flex容器属性 1、display：flex、inline-flex （将对象作为内联款及弹性伸缩盒显示） 注意：设为flex布局后，子元素的float、clear和vertical-align属性将失效。 2、flex-direction属性：决定主轴的方向（即项目的排列方向） flex-direction属性：row（默认 从左到右）、row-reve
html弹性布局什么意思,弹性布局display:flex是什么意思
weixin_39834475的博客
06-22 3377
弹性布局display:flex是什么意思张语2020-10-16在css中，flex是Flexibe Box的缩写,意思为”弹性布局”。任何一个容器都可以指定为flex布局。采用flex布局的元素，称为flex容器，它的所有子元素自动成为容器成员称为flex项目。容器默认存在两根轴: 水平的主轴 和 垂直的侧轴. 主轴的开始位置(边框的交叉点)叫做main start,结束位置叫做main en...
display设置弹性盒布局
qq_42994779的博客
08-30 412
display设置弹性盒布局 https://blog.csdn.net/ITBwy/article/details/52648711
html中弹性布局的作用,HTML中弹性布局（Flex）的介绍（附代码）
weixin_39905816的博客
06-10 787
这篇文章给大家分享的内容是关于HTML中弹性布局的内容，有需要的朋友可以参考一下，希望可以帮助到大家。一、Flex布局是什么？Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。二、基本概念采用Flex布局的元素，称为Flex容器(flex container)，简称”容器”。它的所有子元素自动成为容器成员，称为Flex...
html关于flex布局的知识
alsdiuhfeircn的博客
05-29 687
display:flex;/*flex块级，inline-flex:行内快*/ 　　justify-content:space-around;/*center:水平居中,flex-start:靠左;flex-end:靠右；space-between:两边的向两边靠，中间等分；space-around:完美的平均分配*/ 　　align-items:stretch;/*c...
html5第八课时，灵活布局，flex
甲戌天火的博客
05-13 299
html> html> head lang="en"> meta charset="UTF-8"> title>灵活布局,flextitle> style> #div1{ width: 400px; height: 400px; background-color: red;
Html——flex布局 弹性布局
热门推荐
chhhhh0403的博客
05-14 1万+
以下文章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案。 一、flex布局的语法 块级元素 ：display: flex ———— 将容器盒模型作为块级弹性伸缩盒显示 行内元素 ：display: inline-flex ———— 将容器盒模型作为内联级弹性伸缩盒显示 设置flex布局后，flex item的float、clear和vertical-align 属性都失效 flex布局默认为横向 二、容器属性 flex的排列属性： 元素名称 说明
Flex布局
aitiao2804的博客
06-12 319
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 任何一个容器都可以指定为Flex布局。 #box{ display: flex; width: 500px; height: 300px; border: 10px soli...
css3弹性伸缩盒子
dianbolan的博客
10-09 1958
CSS3弹性伸缩布局 这个貌似要加前缀才能使用 1.如何将一个元素设置为弹性盒子 display:-xxx-box; 2.设置容器内伸缩元素的排列方式 -xxx-box-orient 可选的值 vertical(垂直) horizontal(水平) inline-axis(和水平貌似没区别) block-axis(和垂直貌似没区别) 3.设置容器内伸缩元素的排列顺序 -xx
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值