flex 布局以及样式

1.Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性
2.任何一个容器都可以用flex布局(注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效)

  1. 采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”
  2. 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
    项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size

5.容器的属性有6个

 #1. flex-direction作用是决定主轴的方向.box {flex-direction: row | row-reverse | column | column-reverse;}有4个值row(默认值):主轴为水平方向,起点在左端。row-reverse:主轴为水平方向,起点在右端。column:主轴为垂直方向,起点在上沿。column-reverse:主轴为垂直方向,起点在下沿
# 2.flex-wrap属性flex-wrap属性定义,如果一条轴线排不下,如何换行。.box{flex-wrap: nowrap | wrap | wrap-reverse;}有3个值nowrap(默认):不换行。wrap:换行,第一行在上方。wrap-reverse:换行,第一行在下方。
#  3.flex-flow属性是flex-direction属性和flex-wrap属性的简写形

式,

    默认值为row nowrap

# 4.justify-content属性

   justify-content属性定义了项目在主轴上的对齐方式.box {justify-content: flex-start | flex-end | center | space-between | space-around;}它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右flex-start(默认值):左对齐flex-end:右对齐center: 居中space-between:两端对齐,项目之间的间隔都相等。space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。# 5.align-items属性定义项目在交叉轴上如何对齐。.box {align-items: flex-start | flex-end | center | baseline | stretch;}
  1. border-bottom设置完成后,想要开头的一段不需要,可以设定一个空的子元素,高度超过它,覆盖掉

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/279061.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java swing列表数据加监听,【Java Swing公开课|Java监听列表项选择事件怎么用,看完这篇文章你一定就会了】- 环球网校...

【摘要】作为一门面向对象编程语言,Java吸收了C语言的优点,也展现了其强大的一面,我们能在各个地方看到其功能强大和简单易用的两个特征,当然,也吸引了很多程序员的注意力,所以就有人想了解Java的相关内容&…

fc-ae-1553_什么是AE-L,AF-L和*按钮,它们的作用是什么?

fc-ae-1553DSLRs and mirrorless cameras have a lot of buttons. If you’re just starting to get the hang of manually controlling your camera, you’re probably wondering what all the—seemingly non-essential—ones do. Let’s take a look at the AE-L, AF-L, AF-…

PopsTabView--filter容器

PopsTabView是个filter容器,他可以自动,快速,构建不同筛选样式,自由组合成一组tab. DownloadDownloadAuthorLicense筛选样式筛选种类可自定义属性单列单选,多选初始数据bean,筛选结果bean,tab样式,筛选样式多排单选,多选初始数据bean,筛选结果beantab样式,筛选样式双列单项单选…

git 基本使用方法

git clone https://gitee.com/kuaiyiwazz.git //开始下载服务器项目文件(后边是服务地项目的地址)git add . //这里有个点(仔细看)git status //检查项目修改状态git commit -m"注释(修改的内容)" git push //添…

大学留级两年不敢和家人说_您说什么:如何与家人保持联系?

大学留级两年不敢和家人说Earlier this week we asked you to share your tips, tricks, and techniques for staying connected when you’re away from your home broadband connection. Now we’re back with a roundup of what you said. 本周早些时候,我们要求…

DevExpress v17.2新版亮点—WinForms篇(四)

2019独角兽企业重金招聘Python工程师标准>>> DevExpress首推团队升级培训套包,最高可省10万元!查看详情>>> 用户界面套包DevExpress v17.2终于正式发布,本站将以连载的形式为大家介绍各版本新增内容。开篇介绍了DevExpre…

Solr 11 - Solr集群模式的部署(基于Solr 4.10.4搭建SolrCloud)

目录 1 SolrCloud结构说明2 环境的安装2.1 环境说明2.2 部署并启动ZooKeeper集群2.3 部署Solr单机服务2.4 添加Solr的索引库3 部署Solr集群服务(SolrCloud)3.1 启动ZooKeeper3.2 ZooKeeper管理配置文件3.3 修改SolrCloud监听端口3.4 关联Solr与ZooKeeper3.5 分发SolrCloud服务3…

matlab怎么画一箭穿心,MATLAB学习与使用:如何绘制三维心形图 经验告诉你该这样...

MATLAB是MATrix & LABoratory(矩阵实验室)的缩写,是一款强大的科学软件,具有编程、绘图、仿真等功能。利用MATLAB绘制一款三维的心形图,然后送给心爱的姑娘,也是理工男撩妹的一项小技能。工具/材料MATLAB三维心形图操作方法01…

mac重置系统_如何在Mac上重置打印系统

mac重置系统Printers are notorious for failing frequently. A quick restart of the printer or computer usually fixes most intermittent issues, but occasionally it’s best to reset your printing settings and reinstall the printer completely. Consider this a f…

COW奶牛!Copy On Write机制了解一下

前言 只有光头才能变强 在读《Redis设计与实现》关于哈希表扩容的时候,发现这么一段话: 执行BGSAVE命令或者BGREWRITEAOF命令的过程中,Redis需要创建当前服务器进程的子进程,而大多数操作系统都采用写时复制(copy-on-w…

参数回调

1.场景 参数回调方式与调用本地 callback 或 listener 相同,只需要在 Spring 的配置文件中声明哪个参数是 callback 类型即可。 Dubbo 将基于长连接生成反向代理,这样就可以从服务器端调用客户端逻辑 2.

matlab胡良剑第五章,MATLAB习题参考答案(胡良剑,孙晓君)

MATLAB习题参考答案第一章 MATLAB入门4、求近似解解:>> x-2:0.05:2;yx.^4-2.^x两个近似解:y1f(-0.85) -0.0328; y2f(1.250) 0.0630第二章 MATLAB编程与作图1、 设x是数组,求均值和方差 解:函数文件如下:function…

windows 全局变量_如何在Windows中使用全局系统环境变量

windows 全局变量Any system administrator who spends a good bit of time in the command prompt or batch scripts is probably well aware of built in environment variables Windows offers (i.e. Path, WinDir, ProgramFiles, UserProfile, etc.). If you find yourself…

Day2-T1

原题目 Describe&#xff1a;贪心&#xff0c;左边和右边中选字典序小的 code&#xff1a; #include<bits/stdc.h> using namespace std; int n,step,head,tail; char p[50005]; int main() {freopen("bcl.in","r",stdin);freopen("bcl.out&quo…

hadoop编译java,Hadoop源码编译(2.4.1)

背景Hadoop 2.4.1预编译版本自带的libhadoop.so是在32位机器上编译上,导致在64位OS上运行时&#xff0c;总出现如下告警&#xff1a;WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform... using builtin-java classes where applicable查看…

C# System.Windows.Forms.NumericUpDown 控件全选其中文字

num_length.Focus(); UpDownBase updbText (UpDownBase)num_length; num_length.Select(0, updbText.Text.Length);转载于:https://www.cnblogs.com/LuoEast/p/7942476.html

twitter api使用_使用P2创建自己的Twitter风格的组博客

twitter api使用Would you like a great way to post stuff quickly online and communicate with your readers? Here’s how you can use the P2 theme to transform WordPress into a great collaboration and communications platform. 您是否想以一种很好的方式在网上快…

10_30_unittest

1、断言 1&#xff09;、self.assertEqual(2,res)#期望值qian、结果值hou2&#xff09;TextTestRunner 源码 必要的参数3&#xff09;测试结果 上下文管理器 with open("test.txt",w,encodingutf-8) as file:runner unittest.TextTestRunner(streamfile,verbosity2)…

用maven profile实现环境配置切换

前言 互联网后端服务通常会部署多个环境&#xff1a;开发环境、测试环境、预发布环境和生产环境。不同的环境通常有各自的环境配置&#xff0c;例如mysql服务器的地址、用户名密码&#xff0c;zookeeper的ip和端口等等。为了使打出的jar包能获取不同环境的配置&#xff0c;业界…

laravel graphql php,结合 Laravel 初步学习 GraphQL

本文字数&#xff1a;7134&#xff0c;大概需要14.27分钟。按照官网所述的&#xff1a;A query language for your API一种用于 API 的查询语言GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a…