首页 > 其他分享 >flex 布局

flex 布局

时间:2022-11-18 21:26:09浏览次数:44  
标签:flex 盒子 align 布局 均匀分布 content 正方形

1、如果我们有三个正方形

我们将其放在一个大盒子里

如何让它们均匀分布呢?我们使用 justify-content ,但是这样正方形只能处于盒子最上面(但是等距分布)

如何让它们处于盒子中间呢?我们使用 align-items

如何让它们在竖向分布呢?我们使用 flex-direction

 

2、我们有大量正方形

我们可以使用 flex-wrap 来实现换行,假设现在有三行正方形:

我们使用 justify-content 和 align-items 只能让三行正方形横向均匀分布,纵向非均匀分布地处在盒子中间

如何让三行正方形在纵向均匀分布呢?我们使用 align-content

标签:flex,盒子,align,布局,均匀分布,content,正方形
From: https://www.cnblogs.com/daxiangcai/p/16904908.html

相关文章

  • h5 尽量不要在 flex布局中使用 绝对定位(absolute fixed),一些ios机型不兼容
    h5  尽量不要在flex布局中使用绝对定位(absolute fixed),一些ios机型不兼容先看在flex 布局中使用absolute的样子(安卓是好的,部分ios不行)   解决方案:把fl......
  • [Swift] SwiftUI布局的一些写法基础(用Swift构造UI布局)
    这个文档是在你 完全熟悉Objective-C上用代码构造UI的前提下写的官方教程:https://developer.apple.com/tutorials/swiftui/creating-and-combining-views*使用的一些......
  • html grid 布局与拖动
    1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8"/>5<metahttp-equiv="X-UA-Compatible"content="IE=edge"......
  • flex布局中,元素等间距设置,包括第一个元素的左边,最后一个元素的右边,也等间距
    项目中很多地方会用到等间距排放的场景,使用flex布局可以很方便的实现.fu{display:flex;ustify-content:space-between;}通过上面代码,可以实现子元素的等间距......
  • 布局
    介绍http://ruanyifeng.com/blog/2015/07/flex-grammar.html应用https://juejin.cn/post/6844903614280892429#heading-0骰子https://juejin.cn/post/711245167861537......
  • flex
    Flex基本概念:在flex容器中默认存在两条轴,水平主轴(mainaxis)和垂直的交叉轴(crossaxis),这是默认的设置,当然你可以通过修改使垂直方向变为主轴,水平方向变为交叉轴,这......
  • Flex 布局教程:语法篇
    参考:http://ruanyifeng.com/blog/2015/07/flex-grammar.html网页布局(layout)是CSS的一个重点应用。布局的传统解决方案,基于盒状模型,依赖display属性+position属性......
  • CSS布局2
    结构伪类选择器          ◆伪元素       ◆浮动               ◆清除浮动 ......
  • 通过 BFC 实现页面布局
        实现效果如图<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><title>Title</title><style>......
  • 新增弹框内表单布局
    //表单element-ui//表单<el-formlabel-width="120px":model="form":rules="rules"ref="form"><el-form-itemprop="rulesprop"label="部门名称">//文本框<......