flex布局

最新推荐文章于 2023-06-16 14:25:52 发布
最新推荐文章于 2023-06-16 14:25:52 发布
阅读量109 收藏
点赞数
分类专栏： 前端、Java 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51055743/article/details/114199227
版权
  • 背景

在这里插入图片描述

  • 元素有四种类型

在这里插入图片描述
在flex容器中
1.float失效
2.vertical-align失效
3.元素默认不换行，要换行，使用flex-wrap：wrap/wrap-reverse(放不下的元素跑到上面，与一般不同）

  • justify-content：对齐方式，有5种，其中自动分配间隔space-around，使得每个的边距都一致
  • 主轴变换：flex-direction，默认值为row

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
交叉轴align-items
在这里插入图片描述
text-align对文本有效，对div无效，用交叉轴居中
在这里插入图片描述

  • 实例

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

  • flex-grow（扩展比率）
    父元素剩余空间的瓜分比例

刚开始两个子元素：100×100
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
实例
在这里插入图片描述
在这里插入图片描述

小XiaXia
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flex 布局教程
01-02
Flex布局，也称为Flexbox，是一种CSS布局方案，它的特点是可以创建灵活的响应式布局，简化了垂直居中等传统布局问题的解决方案。Flex布局的主要目标是提供一种更加有效的方式来布置、对齐和分配容器中项目之间的空间...
flex布局实例DOM
01-15
Flex布局，全称为“Flexible Box”，也称作弹性盒布局，是CSS3中的一种布局模式，旨在提供一种更加高效、灵活的方式来对网页或应用程序中的容器内的子元素进行排列、对齐和分配空间。这种布局模式在响应式设计、...
Flex布局
暗武逢天的博客
08-05 3万+
​ Flex 是 Flexible Box 的缩写，意为 “ 弹性布局 ” ，用来为盒状模型提供最大的灵活性。 ​ 任何一个容器都可以指定为 Flex 布局。
弹性盒子（display: flex）布局超全讲解|Flex 布局教程
最新发布
肥晨开发的学习之路
06-16 13万+
弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
Flex布局详解
半亩方糖
03-31 11万+
Flex 布局详解 一、入门 1. flex 是什么？ flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思 2. 为什么我们需要 flex? 解决元素居中问题 自动弹性伸缩，合适适配不同大小的屏幕，和移动端 3.flex 常见术语 三个2 序号 简记 术语 1 二成员 容器和项目(container / item) 2 二根轴 主轴与交叉轴(main-axis / cross-axis) 3 二根线 起始线(main/cross-start)与结束
flex 布局详细
热门推荐
scorpion_V的博客
07-02 28万+
flex布局
flex布局（详解）
wwwjjjjj666的博客
11-26 11万+
flex布局详解
flex布局详解
RayShyy的博客
04-23 2万+
1. Flex布局是什么? Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 任何一个容器都可以指定为Flex布局。 注意：设为Flex布局后,子元素的float、clear和vertical-align属性将失效。 2. 基本概念 容器：采用Flex布局的元素，称为Flex容器（flex con
flex 布局
qq_46405281的博客
08-09 3005
flex 布局
Flex布局让子项保持自身高度的实现
01-19
在用了Flex布局会发现，当水平排列后，会发现所有子项的高度都变成一样的了。   这是因为Flex 布局会默认： 把所有子项变成水平排列。 默认不自动换行。 让子项与其内容等宽，并把所有子项的高度变为最高子项的...
http相关
m0_51055743的博客
03-20 3721
一、HTTP协议简介 1、通信的定义 通信，就是信息的传递和交换。 通信三要素： 通信的主体 通信的内容 通信的方式 案例： 服务器把传智专修学院的简介通过响应的方式发送给客户端浏览器。 其中， 通信的主体是服务器和客户端浏览器； 通信的内容是传智专修学院的简介； 通信的方式是响应； 2、通信协议 通信协议（Communication Protocol）是指通信的双方完成通信所必须遵守的规则和约定。 通俗的理解：通信双方采用约定好的格式来发送和接收消息，这种事先约定好的通信格式，就叫做通信协议。 2.1互联
防抖为什么要使用闭包
m0_51055743的博客
03-11 3650
1. 防抖 从概念上来讲，所谓的闭包指的是一个函数，有权访问另一个函数作用域中的变量的函数。 直观点来讲，JavaScript的闭包就是函数中嵌套函数。 <input type="text" id="input"/> <div id="show"></div> <script> function showInfo(text){ document.getElementById('show').innerHTML=text.target.value }
前端性能优化
m0_51055743的博客
03-21 2833
一、地址栏输入URL发生了什么 大致分为：DNS域名解析、TCP连接、HTTP请求、处理请求返回HTTP响应、页面渲染、关闭连接 首先会进行 url 解析，根据 dns 系统进行 ip 查找 根据 ip 就可以找到服务器，然后浏览器和服务器会进行 TCP 三次握手建立连接，如果此时是 https 的话，还会建立 TLS 连接以及协商加密算法（注意的问题"https 和 http 的区别"） 连接建立之后浏览器开始发送请求获取文件，此时这里还会出现一种情况就是缓存，建立连接后是走缓存还是直接重新获取，需要看
transform位移、缩放、旋转效果(hover、transition、trasform)
m0_51055743的博客
02-20 2149
背景介绍 进行absolute绝对定位，改变位置时，脱离文档流，影响布局 使用transform属性，不影响其他元素布局，只在原来的位置上发生了偏移 这2种效果一样 transform的缩放和旋转 缩放： 1为正常大小，正常情况下，变形时的原点在元素中心位置，但，可改变原点位置transform-oringin：50% 50%（默认位置，中心） 放：transform:scale(1.5); 缩：transform:scale(0.6); 旋转(3D立体效果）： transform:ro.
JS作用域(链)和变量提升
m0_51055743的博客
03-14 1262
一、作用域 JS是静态作用域 let x = 10; function f() { return x; } function g() { let x = 20; return f(); } console.log(g()); // 10 解释：我们调用一个函数时，如果这个函数的变量没有在函数中定义，就去定义该函数的地方查找相似题： var n=123; function f1(n){ console.log(n); } function f2(){ v.........
移动端和PC端（dpr、viewport、rem）
m0_51055743的博客
02-28 813
移动端与网页端的相关介绍 dpr dpr值的意义：当在网页上用CSS划出一条1像素的线段时，当手机的dpr值为2，就会用2个像素划出这条像素。 网页缩放 网页缩放为原来的1/2，就相当于网页本身的大小变成了原来的2倍，下例中变为1:1 meta标签中属性叫做name=“viewport”,viewport指的是手机浏览器的窗口大小，content中指让窗口的宽度跟手机的设备保持一致，当dpr=3,initial-scale取值1/3，即0.333 移动端网页端适配 一：百分比布局(
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值