HTML/CSS父元素flex布局（学习整理）

最新推荐文章于 2024-07-01 20:14:37 发布
原创 最新推荐文章于 2024-07-01 20:14:37 发布 · 394 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入讲解了Flex弹性布局的使用方法，包括display:flex的基础设定，flex-wrap和flex-direction属性的作用，以及justify-content和align-items属性如何实现内容的精确对齐。通过实际案例，读者将学会如何利用flex:1使子元素占满剩余空间。

flex弹性布局

display:flex 设置内部内容为flex布局
flex-wrap：wrap(换行) nowrap(不换行) flex子元素换行
flex-direction:row(默认横向) column(竖向) flex布局方向
align-items:center(垂直于主轴居中)

justify-content:
space-between均匀等分在盒子里，并且两边没有空格
space-around均匀等分在盒子里，并且两边有空格
center沿主轴居中
flex-start默认值 从左向右排列
flex-end从右向左排列

若设置父元素为display：flex，同时设置任意一个子元素样式为flex:1，则子元素占满除了其兄弟元素以外的所有剩余空间

探索HTML5与CSS3的Flex布局：构建现代网页设计的灵活框架
欢迎来到软件测试jeffky博客！在这里，我们将探讨各种与软件测试相关的主题，包括测试策略、方法、工具、最佳实践和行业趋势。我们的目标是帮助读者提高软件质量，确保用户满意度，并分享在软件测试领域的知识和经验。
12-08 907
Flex布局是一种一维布局模型，适用于行或列的布局。它允许我们轻松地对齐和分布容器内的子元素，并能够根据容器的大小自动调整子元素的尺寸。Flex布局非常适合用于创建复杂的响应式布局，如导航栏、卡片布局和网格系统。Flex布局有两个主要轴：主轴（main axis）和交叉轴（cross axis）。默认情况下，主轴是水平方向（从左到右），交叉轴是垂直方向（从上到下）。/* 主轴为水平方向 */通过使用HTML5和CSS3，我们可以轻松实现Flex布局，使网页在不同设备上都能保持良好的显示效果。
前端知识——css之flex布局
Caleb的博客
05-20 3万+
1.基本概念 flex布局是一种布局模型，经常被称之为flexbox，使用flex布局之后，他会给子元素提供强大空间分配和对齐能力。 在没有使用flex布局之前，常用布局有：流式布局，浮动布局，定位布局等等。缺陷是子元素需要自己控制自己在父元素中的位置，还要注意父元素高度坍塌。 flex的优点就是避免不灵活的布局形式，创建更多种布局模式供你选择，解决了子元素的对齐和分布与 响应式等问题。缺点是只能依靠自身的布局模式，稍有变化则无法改变。 2.flex...
flex布局详细总结（父元素篇）
weixin_44148134的博客
07-19 1335
flex布局也就是弹性盒模型，最初我们使用css来对网页进行布局时，主要用到float和position两个属性，要经常考虑父元素坍塌，脱离文档流，BFC等问题。 当我接触到flex布局后，基本上就不用浮动来布局了，flex布局很简单且能很好的达到想要的效果。当然如果考虑到兼容问题，或者一些项目需要细致的布局要求还是浮动比较好解决问题。 一、 兼容性 首先我们来看一下，flex的兼容性。 这张图中我们可以看到，只要在ie10以上就能使用flex布局。 也推荐大家一个网站，可以查看各种属性的兼容性——can
grid【父元素布局方式】【三】
qq_26239917的博客
04-03 318
第一篇的父元素布局样式 第一种写法 .contaniner { width: 400px; height: 400px; display: -webkit-grid; display: grid; grid-template-columns: 100px 100px 100px auto; grid-template-rows: 100px 100p...
CSS3——弹性盒模型-flex——父级属性
weixin_30819085的博客
07-18 310
flex-direction： flex-wrap： justify-content: align-items： align-content： display：flex； 可以填入两个值： inline-flex、flex（flex用到的比较多） 给父级设置display：flex；这个父级就变成了一个具备弹性功能的盒子区域，在这个区域里面我们就可以使用它的功能，...
html 填充父布局,html – CSS：设置div高度以填充父div,无位置：abolute;
weixin_39725650的博客
06-15 431
我(再次)有适应孩子的问题< div>标签的大小为其父级大小.父元素由另一个脚本控制(不想触摸它),并且可以放置在屏幕上具有可变高度/宽度的任何位置.在我下面的例子中,这是#container.我想在其中放置一些布局,它有一些变量和一些固定的尺寸：>一个页脚(这里：#footer),具有固定的高度(例如100px)并填充父级的整个宽度>左侧的导航栏(此处为：#left),具...
flex布局：父元素设为flex,子元素设置宽度无效
qq_43033251的博客
08-18 4208
<div class='box'> <div class='box2'></div> <div class='box2'></div> <div class='box2'></div> </div> .box { display:flex; } .box2 { // 直接设置width:100px无效 // 需要设置成下面格式
CSS的Flex布局的学习
qq_461491877的博客
11-10 452
CSS的Flex布局的学习 哔哩哔哩链接：https://www.bilibili.com/video/BV1iE411y7hb?p=131 Flex(弹性盒、伸缩盒)是CSS中的又一种布局手段，它主要用来代替浮动来完成页面的布局，使元素具有弹性，让元素可以跟随页面的大小的改变而改变。 首先我们先简单创建一个网页，网页中有一个ul，ul中有3个li子元素 <!DOCTYPE html> <html lang="en"> <head> <meta charse
CSS之Flex布局
qq_57907966的博客
02-18 1177
Flex布局
CSS(四) CSS新增、flex布局
最新发布
lxh的博客
07-01 821
CSS新增选择器、flex布局
九、弹性布局flex 1、给父盒子加dispaly:flex   
qq_40739261的博客
04-01 297
九、弹性布局flex 1、给父盒子加dispaly:flex 这三个属性将失效float 、 vertical-align 、 clear 子元素高默认与父元素等高，flex布局下的子元素默认不会换行，子元素的宽度总和比父元素多的时候会自动压缩。 2、flex-flow flex-flow:row wrap; 这是flex-direction 和flex-direction 的复合属性 （1）flex-direction:设置主轴的方向（不设置的时候，默认是x轴） row从左到右，...
html flex 表单样式,表单布局首选Flexbox，简单超乎你的想象！
weixin_29300805的博客
06-26 475
弹性规划(Flexbox)逐步盛行，越来越多人运用，由于它写 CSS 规划真是太便当了。今天，我看到一篇教程才认识到一个最简单的表单，就能够解释 Flexbox，而且内容还很适用。下面，你只需求10分钟，就能够学会简单的表单规划。一、元素表单运用元素。form>上面是一个空表单。依据 HTML 规范，它是一个块级元素，默许将占领全部宽度，但是高度为0，由于没有任何内容。二、表单控件如今，参加...
让一个父元素中的子元素垂直水平居中的方法
精通前端技术，了解后端接口
03-08 646
在选择方法时，应综合考虑项目的具体需求、兼容性以及父元素和子元素的特性。在选择使用哪种方法时，请考虑你的具体需求和父元素、子元素的属性。例如，Flexbox 和 Grid 是现代布局的首选方法，因为它们提供了更大的灵活性和控制能力。在CSS中，有多种方法可以使子元素在其父元素中垂直和水平居中。当子元素的宽度和高度已知时，可以使用这种方法实现水平居中，但垂直居中需要结合其他技巧，比如使用。Flexbox 是现代网页布局中最常用的方法之一，它使得元素的布局和对齐变得非常简单。
弹性盒子（display: flex）布局超全讲解|Flex 布局教程
热门推荐
肥晨开发的学习之路
06-16 17万+
弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
display-flex详解
~★sunshine☆的博客专栏
04-16 9万+
https://blog.youkuaiyun.com/dxnn520/article/details/79342637display flex是什么？微信小程序最近火的不要不要的，下载开发工具测试了一下，小程序对css支持很好， 布局使用display flex布局火力强大，不太了解或者对flex布局比较生疏的童靴分享一下display flex部分知识display flex是将对象作为弹性伸缩盒显示。（...
什么是弹性（display: flex）布局 ？
weixin_41044151的博客
02-25 11万+
display:flex 意思是弹性布局，它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box{ display: flex; } 注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 它可以用于以下四个方面： 1、在不同方向排列元素 2、重新排列元素的显示顺序 3、更改元素的对齐方式 4、动态地将
弹性布局（display: flex）
2401_84341405的博客
04-27 2万+
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考。
CSS 弹性布局
stanwuc的博客
01-10 407
弹性布局
页面布局-----display:flex详解
weixin_46585382的博客
10-14 4万+
页面布局-----display:flex详解。
display:flex详解
Anony_me的博客
06-29 1万+
1. 属性指定了弹性子元素在父容器中的位置。2. 内容对齐（）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐3. 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。4. 属性用于指定弹性盒子的子元素换行方式。5. 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。6. 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。（1）flex-direction的值有: ：横向从左到右排
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值