弹性布局 flex

最新推荐文章于 2023-03-13 11:28:23 发布
最新推荐文章于 2023-03-13 11:28:23 发布
阅读量945 收藏 1
点赞数
分类专栏： css 文章标签： html5 css3 flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57976362/article/details/117135159
版权

前言

第一次接触弹性布局容易犯的错

一、弹性布局是什么？

弹性布局(flex container)，页面中任何一个元素只要设置了display:flex属性，那么当前盒子都称为弹性盒子。弹性盒子默认有两条轴: 默认水平显示的主轴 和 始终要垂直于主轴的侧轴(也叫交叉轴)，在弹性盒子中所有的子元素都是沿着主轴方向显示。

二、使用步骤

        弹性盒子不分行内块元素，且垂直对齐    

          flex-direction: row; 设置主轴方向，默认为x轴 ，子元素跟着主轴排列 

          flex-direction: column; y轴 

          align-items: center; 单行设置侧轴 

          align-content: center; 多行设置侧轴

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=
最低0.47元/天 解锁文章
不是死水
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flex 一行两个_【CSS】：Flex 弹性盒模型
weixin_36163071的博客
01-20 4320
目录1.Flex 弹性盒模型 1.1.知识体系总图1.2.浏览器兼容性1.3. 主轴、垂轴、换行 1.3.1. 主轴方向控制：flex-direction 1.3.2. 换行控制：flex-wrap 1.3.3. 主轴、垂轴方向总结1.4. 主轴方向元素对齐1.5. 垂轴方向元素对齐1.6. ...
CSS弹性盒固定两栏布局案列
weixin_46421045的博客
03-24 392
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} html,body,.box{height: 100%;...
flex布局 一行显示两个同宽、高的盒子 并 可以换行
热门推荐
tengyuxin的博客
08-12 1万+
我在写移动端的项目时，会碰到，我没固定设置某个元素宽度（因为在不同设备宽度不一样），所以就需要用flex布局，通过flex:1;让两个盒子宽度一样，但不能换行，那么接下来只能循环最外层的盒子。......
弹性盒flex布局
weixin_43467567的博客
05-28 123
弹性盒flex布局
flex 一行两个_flex 方式的布局你用对了吗？
weixin_33132553的博客
01-30 1万+
对于 CSS 中的 flex 弹性布局，曾经我在公众号里写过《一点点对 flex 布局有关的看法》和《又一次想说 flex 布局挖坑给你，信吗？》，印象中最深的一个点，是我在文中提到的对于 flex 的这个属性中的三个属性值怎么用的话题。如果你有兴趣的话，可以点击链接再去看看，不想看的可以直接想一下：flex: 1 1 auto;flex:10auto;flex:00200p...
弹性布局-flex布局.zip
05-18
Flex布局，全称为“Flexible Box”或“弹性盒布局”，是CSS3中一种用于处理容器内元素布局的模型。它旨在提供一个更加灵活、响应式的布局方式，尤其适用于多设备环境，如手机、平板电脑等移动设备。在传统布局模式下...
Flex弹性布局详解
09-29
形象生动讲解CSS布局，Flex弹性布局生动形象的理解，更好的理解弹性布局
flex弹性布局的理解。
06-15
1. 什么是 flex 布局 2. 基本概念 3. 容器的属性 4. 项目的属性1. 什么是 flex 布局 2. 基本概念 3. 容器的属性 4. 项目的属性 帮助理解项目属性 1. order 2. flex-grow 3. flex-shrink 4. flex-basis 5. flex 6. ...
css flex 弹性布局详解
09-24
CSS Flex（弹性布局）是一种强大的布局模式，特别适用于创建响应式设计，因为它允许开发者更灵活地控制元素在容器中的对齐方式和排列顺序。在本文中，我们将深入探讨Flex布局的关键概念，包括基本用法、父容器属性...
flex弹性布局用法笔记
01-20
flex弹性布局display:flex介绍1.flex-direction:row|row-reverse|column|column-reverse|initial|inherit (盒子排列方向)2.flex-wrap: nowrap|wrap|wrap-reverse(拆行或拆列)附加：flex-flow（1，2的结合写法）3....
弹性盒子布局
m0_75021294的博客
03-13 514
flex 它是一种布局方式。 主要目的是通过父盒子控制子盒子如何排列,一定是亲爸爸和亲儿子
深入浅出了解Flex弹性布局（一）
锦鲤姑娘的博客
04-14 731
布局从无到有的发展历程以及Flex弹性布局中容器属性的语法（举例：骰子的单个项目布局）
常用弹性盒例子及栅格布局（设置每行盒子固定个数）（分别在水平方向和竖直方向的均匀分布、两端对齐、完美居中（水平垂直居中））（弹性盒真的是ＹＹＤＳ）
JulyNight的博客
09-17 2307
这里分享几个常用的例子，其他的具体的就参考 https://www.runoob.com/css3/css3-flexbox.html 完美居中（水平垂直居中） 举个例子： CSS： .flex-container { display: flex; justify-content: center; align-items: center; width: 400px; height: 250px; background-color: lightgrey; } HTML：
使用 flex布局，一行两个卡片
LYR 的博客
09-02 1万+
<view class="flex justify-around flex-wrap"> <video-card></video-card> <video-card></video-card> <video-card></video-card> <video-card></video-card> <video-card></video-card&gt..
搞定flex布局
weixin_30251829的博客
04-28 201
这几种方式的搭配使用可以轻松搞定 PC 端页面的常见需求，比如实现水平居中可以使用margin: 0 auto，实现水平垂直同时居中可以如下设置： .dad { position: relative; } .son { position: absolute; margin: auto; top: 0; right: 0; ...
css布局——flex布局
aimnr的博客
11-29 1138
前言： flex布局原理 flex是flexble box 的缩写，意为“弹性布局”，用来为盒子模型提供最大的灵活性，任何一个容器都能指定flex布局 注意： 当我们为父盒子指定flex布局以后，子元素的float，clear 和vertical-align属性将失效 采用flex布局的元素被称为flex容器，他所有的子元素称为容器成员简称“项目” flex布局总结原理 就是是通过给父盒子添加flex属性来控制子盒子的位置和排列顺序 1.常见父项属性 flex-direction：设置主轴
CSS3中的弹性盒子模型
a19460204的博客
08-24 256
介绍 在css2当中，存在标准模式下的盒子模型和IE下的怪异盒子模型。这两种方案表示的是一种盒子模型的渲染模式。而在css3当中，新增加了弹性盒子模型，弹性盒子模型是一种新增加的强大的、灵活的布局方案。弹性盒子模型是css3中新提出的一种布局方案。是一种为了应对针对不同屏幕宽度不同设备的一整套新的布局方案。主要是对一个容器中的子元素进行排列、对齐和分配空白空间的方案的调整。 新旧版本...
弹性盒子布局(Flex)，做项目必会技能
qq_42774501的博客
11-27 8796
align-item是定义全部全部的子项，在父盒子身上设置；而align-self是定义单独一个子项，是在子项身上设置；两个属性的值基本作用相同，只是align-self是单独设置一个子元素flex-start：在交叉轴上向起点位置(向上/向下)对齐默认不再展示flex-end：在交叉轴上向结束位置(向上/向下)对齐给黄盒子设置flex-end属性值** center：居中对齐**给黄盒子设置center。
flex 一行两个_这就是flex
weixin_35140642的博客
01-30 1万+
对flex的第一印象就是解决响应布局存在的，使得布局的设置更灵活，但随之而来的是需要明白flex内部是怎么绘制的，一直以来就是看一下其api, 大概知道什么意思，上来就开始写，但对这个玩意却一直没有达到朋友的地步，这就是flex, 根据自己的demo慢慢来撕开它首先，flex就是一个容器，一个大盒子，凡是在这个盒子内的元素都要尊师其制定的位置规则，这个元素该在哪，另外一个元素该在哪，我有我的规则，...
弹性布局 flex布局
最新发布
08-22
Flex布局，也称为弹性布局，是一种浏览器提倡的布局模型。它的特点是可以更简单、灵活地布局网页，避免了浮动脱标的问题。通过使用Flex布局，我们可以精确灵活地控制块级盒子的布局方式，避免浮动布局中脱离文档流...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值