- 使用 Spring Initializr 创建 Spring Boot 应用程序
- 在Spring Boot中配置Cassandra
- 在 Spring Boot 上配置 Tomcat 连接池
- 将Camel消息路由到嵌入WildFly的Artemis上
flex是flexible Box的缩写,意为“弹性布局”,用来为盒装模型提供的最大的灵活性,任何一个容器都可以指定为flex布局。
float
、vertical-align
数据将失效。采用Flex布局的元素,称为Flex容器(flex 容器),简称容器。它的所有子元素自动成为容器成员,称为flex项目(flex item),简称“项目”
总结: 就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式。
flex-direction
:设置主轴的方向justify-content
:设置主轴上的子元素排列方式flex-warp
:设置子元素是否换行align-content
:设置侧轴上子元素的排列方式(多行)allign-items
:设置侧轴上的子元素排列方式(单行)flex-flow
:复合属性,相当于同时设置了flex-direction
和flexwarp
属性值 | 说明 |
---|---|
row |
默认值从左到右 |
row-reverse |
从右到左 |
column |
从上到下 |
column-reverse |
从下到上 |
div {
width: 800px;
height: 200px;
background-color: pink;
/* 给父级添加flex属性 */
display: flex;
/* 默认主轴为 row横(默认),column竖 */
flex-direction: column-reverse;
}
div span {
width: 150px;
height: 100px;
background-color: yellow;
}
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
justify-content 属性定义了项目在主轴上的对齐方式
注意:使用这个属性之前一定要确定好主轴是哪个
属性值 | 说明 |
---|---|
flex-start |
默认值 从头部开始 如果主轴是x轴,则从左到右 |
flex-end |
从尾部开始排列 |
center |
在主轴居中对其(如果是x轴,则水平居中) |
space-around |
平分剩余空间 |
space-between |
先两边贴边,再平分剩余空间(重要) |
div {
width: 800px;
height: 200px;
background-color: pink;
/* 给父级添加flex属性 */
display: flex;
/* 默认主轴为 row横(默认),column竖 */
flex-direction: column-reverse;
/* justify-content 设置主轴上子元素的排列方式 */
justify-content: center;
}
默认情况下,项目都排在一条线(又称:“轴线”)上。
定义:flex布局中默认是不换行的。
如果元素太多,会缩小子元素的宽度,放到父元素里面。
属性值 | 说明 |
---|---|
nowrap |
默认值,不换行 |
wrap |
换行 |
该属性是控制子项在侧轴(默认y轴)上的排列方式,在子项为单项的时候使用。
属性值 | 说明 |
---|---|
flex-start |
默认值 从上到下 |
flex-end |
从下到上 |
center |
挤在一起居中(垂直居中) |
stretch |
拉伸(子盒子不要给高度) |
设置子项在侧轴上的排列方式,并且只能用于子项出现 换行 的情况(多行)
属性值 | 说明 |
---|---|
flex-start |
默认值在侧轴的头部开始排列 |
flex-end |
在侧轴的尾部开始排列 |
center |
在侧轴的中间显示 |
space-around |
子项在侧轴平分剩余空间 |
space-between |
子项在侧轴先分布再两头,在平分剩余空间 |
strech |
设置子项元素高度平分元素高度 |
div {
width: 800px;
height: 300px;
background-color: pink;
display: flex;
/* 换行 */
flex-wrap: wrap;
align-content: center;
justify-content: center;
}
div span {
width: 150px;
height: 100px;
background-color: yellow;
margin: 10px;
}
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
flex-flow
属性是flex-direction
和flex-wrap
属性的复合属性。
例如:设置主轴和换行(换列)
flex-direction: column;
flex-wrap: wrap;
或
flex-flow: column wrap;
定义子项目分配剩余空间,用flex来表示占多少份数。
.item {
flex: <number>; /* default 0 */
}
例如:左右固定,中间占据剩余所有空间
section {
display: flex;
width: 60%;
height: 150px;
background-color: pink;
margin: 0 auto;
}
section div:nth-child(1) {
width: 100px;
height: 150px;
background-color: red;
}
section div:nth-child(2) {
flex: 1;
background-color: yellow;
}
section div:nth-child(3) {
width: 100px;
height: 150px;
background-color: blue;
}
<section>
<div></div>
<div></div>
<div></div>
</section>
三个盒子平均三等分
section {
display: flex;
width: 60%;
height: 150px;
background-color: pink;
margin: 0 auto;
}
section div{
flex: 1;
text-align: center;
}
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
align-self 属性允许单个项目有其他项目不一样的对齐方式,可覆盖align-items属性。
默认值为auto,表示集成父元素的align-items
属性,如果没有父元素,则等同于stretch
section {
display: flex;
width: 60%;
height: 150px;
background-color: pink;
margin: 0 auto;
}
section div {
flex: 1;
text-align: center;
}
section div:nth-child(3) {
/* 自己对齐一个位置 */
align-self: flex-end;
background-color: yellow;
}
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
数值越小,排列越靠前,默认为0
注意:和z-index不一样
section div:nth-child(3) {
flex: 1;
order:-1;
}
参考地址:https://www.bilibili.com/video/BV1N54y1i7dG
更新 对于那些不喜欢内联 CSS 并想要类的人,这里有另一个带有类和样式表的 jsFiddle。 更新结束 我想做一个产品页面。它将包含三列。第一个是图片,第二个是一些规范,第三个是“入篮”。所有列的
我创建了一个简单的测试应用程序 使用以下代码 var i : int; for (i=0; i *
我做了一个小demo http://html5.by/blogdemo/flexbox/flex-grow-shrink-basis-stackoverflow.html flex 容器中有2个 fl
我读过好几遍,要让 flex-grow 按预期工作,您通常需要设置 flex-grow:1(或 flex: 1) 在元素的父级、其父级等上,一直向上。 在学习 flexbox 时,这给我的印象是它具有
我开始学习 FLEX。我只有 flex sdk。所以我只能使用它开始学习吗?如果是这样,请建议我要通过的链接.. 但是,使用编辑器将最大限度地减少我们的工作,并自行创建代码。所以作为一个新的学习者,理
有没有办法使用 flex-direction: column 在 flex 容器中放置 flex 项有相同的高度,只使用 CSS? JSFiddle:https://jsf
我有一个 flex .swf 和一个单独的 AIR 项目,我试图通过套接字相互通信。 这两个程序连接正常,.swf 能够毫无问题地将数据发送到 AIR 应用程序。但是,我发现当 AIR 应用程序将数据
在这种情况下,我希望将 2.5 放置在 2 下方 - 但 flexbox 容器强制将其放置在同一行,而不是将其放置在 div 下方那已经是那个特定的顺序了。 我如何使用 flexbox - 将包含 2
假设您有一个带有显示 flex、flex-direction 列的 div,在本例中高度为 600。 它有三个子项,每个子项的属性 flex 等于 1。前两个子项呈现一些简单文本,第三个子项呈现 h1
男孩,这个头衔是满口的。让我解释一下我的困惑: 我有一个 flex 容器和 2 个 flex 元素。 /* CSS */ .container {
这个问题在这里已经有了答案: CSS3 Flexbox: display: box vs. flexbox vs. flex (3 个答案) 关闭 1 年前。 今天我们中的许多人都知道 displa
其用例是带有单选按钮的响应式表单。当在大 PC 屏幕上时,所有单选按钮通常都在屏幕上的一行中(就像带有 flex-direction: row 的非包装 flex 容器中的 flex 元素)。在电话上
在可访问的 flex 应用程序中,用户可以使用 TAB 键在控件中导航。 在用户激活特定链接后,flex 应用程序会在 html 页面顶部弹出,并使用 swfobject.embedSWF 加载。 它
我将我的 Flex 3 项目导入 Flex 4 并删除了 Flex 4 问题窗口中列出的所有错误和警告。 启动我的应用程序时,我在 Flex 4 中遇到以下错误。 这可能是什么原因? Error: C
我有如下标记: alot of text 我不能让黄色占据红色的 100% 高度,即使红色溢出,它也只占据窗口的 100%。如果我将红色的 display
我在 Eclispe 3.4 中安装了 flex builder 3 插件。现在许可证过期了。所以我需要在其中添加另一个许可证。但我无法更改许可证 key ,因为该选项已禁用。 因此,请任何人知道如何
这个问题在这里已经有了答案: Make flex items have equal width in a row (3 个答案) How to make Flexbox items the same
我正在尝试理解以下行。 flex :0 1 50% 现在,如果最后一个值,flex basis 是像素,上面会说该元素不允许增长,但允许缩小并且最大为 50 像素。 但是用百分比代替,有什么关系。它将
我一直致力于 flex 布局,遇到了针对 Firefox 和 IE11 的问题。 我创建了一个 codepen显示问题。 截图 Chrome(左)、Firefox(右) 描述 预期的行为是header
我正在尝试在 flex (flash builder 4) 中创建一个简单的表单。我在里面放了一个表单容器和 FormItems。例如,表单项是标准的“客户”字段,例如名字、姓氏、地址、城市、州、 z
我是一名优秀的程序员,十分优秀!