flex弹性布局（主流）

最新推荐文章于 2024-10-04 00:46:18 发布
最新推荐文章于 2024-10-04 00:46:18 发布
阅读量208 收藏 3
点赞数 6
分类专栏： 移动端 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ldd_eb/article/details/137418579
版权

flex弹性布局

一.传统布局与flex布局区别（不需要清除浮动，一行内显示）

在这里插入图片描述

二.布局原理（父级添加，控制子盒子）

在这里插入图片描述
在这里插入图片描述

三.flex布局父级常用属性

在这里插入图片描述

1.flex-direction(默认x轴row）

概念
在这里插入图片描述
在这里插入图片描述
属性
在这里插入图片描述

在这里插入图片描述

2.flex-wrap(默认不换行）

在这里插入图片描述

3.justify-content（主轴子元素排列方式）

在这里插入图片描述

4.align-items（侧轴子元素排列方式）

在这里插入图片描述

5.align-content（侧轴子元素排列方式）（多行）

在这里插入图片描述

6.align-items和align-content的区别

在这里插入图片描述

7.flex-flow

在这里插入图片描述
在这里插入图片描述

四.flex布局子项常见属性

在这里插入图片描述

1.flex

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.align-self

在这里插入图片描述

3.order

在这里插入图片描述

ldd_eb
关注
专栏目录
flex布局(弹性布局)初阶
m0_66156767的博客
05-14 549
flex布局 flex布局极大的提高了我们布局的效率，更简单、灵活。 使用flex布局 使用的步骤比较简单： 1、给需要使用弹性盒子布局的亲父元素设置：display: flex;弹性布局我们一般称呼父元素为：弹性容器，子元素为弹性盒子。 2、布局所设置的元素也基本都写在父级。 使用弹性布局时一定要注意：display: flex; 一定要给亲父级添加并且它只影响它的亲儿子元素，孙子级完全无影响！ flex属性值 代码有： <!DOCTYPE ...
深入浅出了解Flex弹性布局（一）
01-08
在深入探讨Flex弹性布局之前，我们需要先回顾一下布局技术的历史发展。布局技术随着Web标准的发展而不断进化，从最初的表格布局(table-based layout)、浮动布局(floated layout)、到后来的定位布局(positioned ...
display：flex 弹性布局
zzb_lly的博客
04-27 2984
stretch (默认值) : 拉伸 flex 项以填充整个容器（这里特别要注意：如果 flex 项有尺寸属性（min-width / max-width / width / min-height / max-height / height），那么首先应用这些尺寸属性，伸展，就是会填充宽度。space-between: flex 项沿主轴均匀排布，即我们常说的沿主轴 两端对齐 ，第一 个flex 项在主轴开始位置，最后一个flex 项在主轴结束位置。flex-grow: 定义子元素的放大比例;
弹性布局flex
qq_48241564的博客
05-23 638
弹性布局flex 1.前言： 弹性布局又称为flex布局，由W3C推出的一种布局方式，优点体现在简便、完整、响应式地实现各种页面布局。而且已经得到所有主流浏览器的支持，它的出现意在取代“display+float+position”的布局形式，解决“display+float+position”所存在的不能自适应的问题，简而言之就是通过弹性布局可以实现屏幕自适应，不会应为屏幕的变化改变原有的布局。 2.学习开始 2.1初实现 实现弹性布局只需要在外层父容器设置display:flex即可 &l
flex弹性布局详解
qq_45845127的博客
05-24 176
flex弹性布局详解 1.弹性布局简介： 弹性布局，又称“Flex布局”，是由W3C老大哥于2009年推出的一种布局方式。可以简便、完整、响应式地实现各种页面布局。而且已经得到所有主流浏览器的支持，我们可以放心大胆的使用。 >>> 了解两个基本概念，接下来会频繁提到： ① 容器： 需要添加弹性布局的父元素； ② 项目： 弹性布局容器中的每一个子元素，称为项目； >>> 了解两个基本方向，这个牵扯到弹性布局的使用： ① 主轴： 在弹性布局中，我们会通过属.
flex弹性布局入门
weixin_44852386的博客
09-13 1602
学习完了flex布局，觉得很有用，然后就写了这么一篇博客来做个总结。（提前说明一下，我是跟随b站上某位很出名老师的指导完成的学习，可能有同学和我学习了同样的内容。） flex布局是非常实用的一种前端布局，在不少主流前端语言都有出现，今天我们主要以HTML为案例。 一、基础代码展示和效果体验 1.下面将是我们页面的基础代码，所有的改变将以本代码为基础，添加的绝大部分改变可添加入style标签中。 <!DOCTYPE html> <html lang="en"> <head>
Flex 弹性布局
zhzijun的博客
04-15 365
Flex 弹性布局Flex(弹性) 布局1.概念传统布局比较两端对齐布局：传统布局：伸缩布局：容器和项目两种容器2. 容器的属性设计在容器上的属性注意：1.flex-direction - 调整主轴方向1.flex-direction : row2.flex-direction : row-reverse3.flex-direction : column4.flex-direction : column-reverse2.justify-content - 调整主轴方向对齐方式1.justify-conte
Flex弹性布局详细介绍
似水流年QC的博客
05-13 848
背景介绍 网页布局是前端的一项重点内容，随着移动端的兴起，布局也由浮动（float）定位（position）布局向弹性布局（flex）转移，响应式地实现页面布局，现阶段已经得到了所有主流浏览器的支持。 Flex 是 Flexible Box的缩写，意思是“弹性布局”。主要思想是使父容器能够调节子元素的宽高和排列顺序，从而更好地填充可用空间，适应不同类型的显示设备。 采用Flex布局的元素称为Flex容器（flex container） 简称为容器， 它对应的子元素称为容器成员 （flex it
CSS Flex 弹性盒布局详解
weixin_44196299的博客
08-05 1138
弹性盒布局又称“flex”布局，是在CSS3中的一种新布局方式，可以简洁、方便、响应式地实现各种页面布局，因此自一提出受到了极大地追捧，目前也得到了各大主流浏览器的支持，因此迅速替代了之前的“display+float+position”的布局形式。 一、弹性盒布局简介 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 弹性容器通过设置 display ...
flex-box弹性布局
zyoungw
07-26 1037
布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
弹性布局Flex
shengli515的博客
06-01 156
弹性布局，又称“Flex布局”，是由W3C老大哥于2009年推出的一种布局方式。可以简便、完整、响应式地实现各种页面布局。而且已经得到所有主流浏览器的支持，我们可以放心大胆的使用。 >>>了解两个基本概念，接下来会频繁提到： ①容器：需要添加弹性布局的父元素； ②项目：弹性布局容器中的每一个子元素，称为项目； >>>了解两个基本方向，这个牵扯到弹性布局的使用： ①主轴：在弹性布局中，我们会通过属性规定水平/垂直方向为主轴； ②...
弹性布局制作的简单百度网页
06-30
在IT行业中，网页布局设计是前端开发的重要组成部分，特别是在当今多设备、多屏幕尺寸的环境下，弹性布局（Flexbox）成为了一种主流的解决方案。本文将深入探讨如何使用HTML5和弹性布局技术来创建一个简单的百度网页...
前端的全栈混合之路Meteor篇：3.0新版本介绍
分享有趣的、贴近生活的CS知识
10-01 1133
Meteor全栈框架3.0版本终于稳定下来了，它的效果约等于webpack+vue+express+socket.io+mongodb+npm+uniapp，学一个搞定全套，值得学习了解下，最后找到适合于自己的技术栈。
Javascript数组研究03_手写实现_fill_filter_find_findIndex_findLast_findLastIndex
qq_33546823的博客
10-03 1224
fill()方法用一个固定值填充一个数组中从起始索引（默认为 0）到终止索引（默认为）内的全部元素。它返回修改后的数组。输入参数value：用来填充数组元素的值。start（可选）：开始填充的位置，默认值为 0，索引处理方法和copyWithin一致。end（可选）：停止填充的位置（不包含该位置），默认值为，索引处理方法和copyWithin方法一致。输出：修改后的原数组。注意事项该方法会改变原数组，是修改方法。对于稀疏数组，空槽也会被value填充。是通用的方法在空数组上不会有任何处理。
Vue根实例、实例总结
最新发布
m0_54007573的博客
10-04 518
Vue根实例、实例总结
登录功能开发 P167重点
2303_81204446的博客
09-30 438
前端无法识别controller方法，因此存在Dispa什么的。Claims：jwt中的第二部分。
Webpack 打包后文件过大，如何优化？
官方推荐
09-30 6029
Webpack 打包后文件过大，如何优化？
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1232
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
vue框架和uniapp框架区别
ning的博客
10-02 1251
Vue.js 是一个构建用户界面的渐进式框架，非常适合用来创建单页应用（SPA）。它的核心库只关注视图层，易于学习和集成，同时拥有丰富的生态系统，包括路由管理、状态管理和各种插件。Uni-app 是一个使用 Vue.js 开发所有前端应用的框架，支持编译到多个平台，包括iOS、Android、Web、以及各种小程序等。Uni-app 旨在“一套代码，多端运行”，极大地提高了开发效率。Vue.js 和 Uni-app 都是强大的前端框架，但它们的重点和应用场景有所不同。
微信小程序布局新选择：Flex弹性布局
"本文讨论了如何使用flex弹性布局来替代传统的浮动布局，特别是在微信小程序页面设计中的应用。文章指出，浮动布局存在一些问题，如垂直居中困难和浮动坍塌等，而flex布局则提供了更简便、完整和响应式的解决方案，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值