首页 > 其他分享 >7.flex布局

7.flex布局

时间:2024-08-04 22:40:21浏览次数:8  
标签:flex space 布局 start 对齐 row

flex布局

1.小黄鸭代码调试法

2.阿里图标

3.flex布局(弹性和模型)

flex是当前较为主流的布局方式-->它布局起来更加方便,可以去掉float-->float一开始不是用来布局的
	用布局的元素称为flex的容器,它里的内容称为容器项目/flex
	项目:父级:容器  子集:项目
	flex布局原理:就是通过两条轴,把网页分割为一行行/一列列
	flex主轴是从左向右,flex副轴是从上到下,默认情况是左右水平布局。
	flex三要素:
		1.主轴的方向(你是要左右水平布局/上下垂直布局)
		2.主轴的对齐方式
		3.副轴的对齐方式
	flex的使用方法:
		display:flex;
	flex样式说明:
		设置主轴方向(决定左右/上下布局):flex-direction
            语法:flex-direction:row/colume/row-reverse/column-reverse
            row:行,默认属性,从左到右
            column:列,从上往下
            row-reversse:行反转,从右到左
            column-reverse:列反转,从下到上
         设置主轴对齐方式:justify-content:start/end/space-around/space-between
         	flex-start:默认,按照起点对齐,左/上
         	flex-end:按照终点对齐
         	space-around:均分对齐
         	space-between:两端对齐
         设置副轴对齐方式:align-items:center/flex-start/flex-end
         	center:居中
         	flex-start:靠起点
         	flex-end:靠终点
         设置换行,flex自带缩放功能,如果你不想要可以设置:flex-wrap属性:
         	no-wrap:默认,不换行
         	wrap:换行
         flex项目属性:
         	order:项目的顺序,数值越小,排序越靠前,默认是0;一定要是数值,不是像素。
         	

4.百度壁纸背景

5.拓展

标签:flex,space,布局,start,对齐,row
From: https://www.cnblogs.com/positive-boy/p/18342356

相关文章

  • 位段 -- 内存布局详解-浅谈C语言
    目录位段位段的介绍位段使用示例:位段的内存分配Example内存分配解析:位段的跨平台问题位段位段的介绍位段(二进制位):就是按位存储位段(bit-field)是C语言中的一种特殊数据类型,它允许将一个字节分成几个部分,并为每个部分指定特定的位数,以便在内存中存储和访问这些部分。其中位......
  • 【C语言】结构体内存布局解析——字节对齐
    ......
  • WPF布局
    在WPF中,StackPanel是一个非常常用的布局控件,它会按照指定的方向(水平或垂直)依次排列子元素。然而,StackPanel本身并不提供直接的方法来让最后一个子元素占用剩余空间。然而,可以通过一些变通的方法来实现这一点。以下两种方法可以实现让StackPanel中的最后一个元素占用剩余空......
  • FlexibleBI工业智能质检系统:提升质量管理与生产效率的智能解决方案
    在现代制造业中,质量管理是至关重要的一环。我们的工业智能质检系统专注于通过人工智能赋能的预测分析,为客户提供全方位的质量控制和尺寸分析工具。该系统类似于市面上的高端质检软件,但我们强调的是完全自主可控和国产化的三坐标测量机(CMM)尺寸公差质量管理工具。本文将为您详细......
  • FlexibleBI智能质检新纪元:创新工业软件助力质量管理和效率提升
    在制造业中,精确的质量控制和快速的问题响应能力对于保证产品质量至关重要。传统的质量管理手段,如使用Excel进行手动数据分析,已经不能满足现代工业的需求。我们自主研发的工业智能质检系统,通过先进的人工智能技术,为用户提供了一款功能强大的质量管理工具。本文将介绍这款系统如......
  • FlexibleBI现代制造业的智能化质量管理:打破传统,迈向未来
    随着制造业的不断进步,质量管理工具和方法的需求也在不断提升。我们的工业智能质量管理系统,致力于通过人工智能技术提供精准的预测分析,帮助企业实现全面的质量控制。本文将详细介绍该系统的功能优势,以及它如何帮助企业优化生产过程,提升产品质量。FlexibleBI自动化与智能化:远离......
  • Android 11.0 Launcher修改density禁止布局改变功能实现
    1.前言在11.0的系统rom定制化开发中,在关于Launcher3的定制化功能中,在有些功能需要要求改变系统原有的density屏幕密度,这样就会造成Launcher3的布局变化,所以就不符合要求,接下来就来看下如何禁止改变density造成Launcher3布局功能改变的实现2.Launcher修改density禁止布局改......
  • 一个div 使用flex 布局2个div,第一个div占75%,另一个占25%
    <divclass="container"><divclass="childchild-75">第一个div</div><divclass="childchild-25">第二个div</div></div>.container{display:flex;/*启用Flexbox*/width:100%;/*假设容器占满整......
  • QT之ui控件随窗口布局的大小而自适应大小
    QT之ui窗口自适应布局新建个工程说明,注意此处勾上Generateform根据开发电脑的系统选择套件点开widget.ui,如图鼠标随意托几个常用控件展示,如图三个控件,如图,水平布局sizePolicy策略:图中,控件的sizePolicy策略将决定上面这三个控件组在自适应成的控件组的分配策略。Fi......
  • flex 一行放四div 每个div 放三个div
    <!DOCTYPEhtml><html><head><style>.container{display:flex;flex-wrap:wrap;}.outer-div{display:flex;width:25%;/*每个外部div占据100%宽度的25%*/box-sizing:border-box;padding:10px;/*根据需要调整间距......