CSS中的flex布局

1、flex 布局的概念

Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局,行内元素也可以通过 inline-flex 使属性值用 Flex 布局。

inline-flex 和 inline-block 一样,对设置了该属性值的元素的子元素来说是个 display:flex 的容器,对外部元素来说是个 inline 的块。

.box{
  display: flex;
}
.inlinebox{
  display: inline-flex;
}

设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。

下面将元素分为容器和子元素,设置了 display 属性的即为容器,容器内部的元素即为子元素也称为项目。

2、具有flex属性的容器的属性

设置了 flex 属性的容器可以通过设置其他属性值来设置容器的子元素的排列

以下6个属性可以设置在容器上:

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

2.1、flex-direction

flex-direction 属性决定子元素的排列方向,该属性可以有四个属性值:

row(默认值):主轴为水平方向,起点在左端;row-reverse:主轴为水平方向,起点在右端。column:主轴为垂直方向,起点在上沿。column-reverse:主轴为垂直方向,起点在下沿。

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}
<div class="test02">
    <div class="children">
      <p>1</p>
    </div>
    <div class="children">
      <p>2</p>
    </div>
    <div class="children">
      <p>3</p>
    </div>
</div>
.test02 {
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
 }
.test02 .children{
   width: 50px;
   height: 50px;
}

下面分别是设置 flex-direction 为 row、  row-reverse、            column、               column-reverse 的情况:

        

2.2、flex-wrap属性

让弹性盒的子元素在必要的时候拆行,当不设置该属性值的话默认值是不换行的,如果容器装不下子元素的话子元素会进行相应的收缩。有三个属性值:

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap(默认):不换行。        wrap:换行,第一行在上方。     wrap-reverse:换行,第一行在下方。下面分别对应:

      

2.3、flex-flow 属性

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性,默认值为 row nowrap。当然,该属性也可以只设置其中一个属性值。

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

2.4、justify-content属性

justify-content 属性定义了项目在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

flex-start(默认值):左对齐;    flex-end:右对齐;          center: 居中;          space-between:两端对齐,项目之间的间隔都相等;

      

space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

原文地址:https://www.cnblogs.com/wenxuehai/p/10485258.html

时间: 2024-10-28 14:52:50

CSS中的flex布局的相关文章

CSS中常见的布局

一.css中常见的布局有哪些? (1)两列布局 (2)三列布局 (3)弹性布局 (4)圣杯布局 (5)双飞翼布局 二.具体实现  (1)两列布局 https://www.cnblogs.com/qing-5/p/11442906.html (2)三列布局 https://www.cnblogs.com/qing-5/p/11338819.html (3)圣杯布局和双飞翼布局 相同点: a.三列布局,中间宽度自适应,两边定宽: b.中间栏要在浏览器中优先展示渲染: c.允许任意列的高度最高: d.

引用Normalize.css之后,flex布局失效的原因以及解决办法

昨天无意知道Normalize.css框架.于是在最近使用了h5属性的项目中引用来玩玩.但是习惯了用通配符去重置.在引用Normalize.css之后各种不适.最直接的影响,比如我对footer header等H5标签容器设置了display:flex;却没有任何效果.打开浏览器审查元素发现, Normalize.css给h5的这些标签预定义了display:block.而且权值非常高,把我自己footer的display:flex覆盖掉了,这就是我设置flex布局属性不起作用的原因. 解决方法

在微信小程序中学习flex布局

网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局将成为未来布局的首选方案.本文介绍它的语法,下一篇文章给出常见布局的Flex写法. 以下内容主要

在移动端中的flex布局

flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局,  弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, 想让另外一个div的占据剩下的宽度: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</tit

HTML/CSS:display:flex 布局教程

网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex 布局将成为未来布局的首选方案.本文介绍它的语法,下一篇文章给出常见布局的 Flex 写

vue项目中h5移动端中通过flex布局实现首尾固定,中间滚动(借鉴)

html中 <div class="flexLayoutr"> <div class="div_head"></div> <div class="div_content">中间区域</div> <div class="div_foot"></div> </div> css中 *{ margin: 0; padding: 0; } .

css中的各种布局写法(不定期更新)

前端做久了越来越感觉css的博大精深,虽然css严格意义上算不上是一门编程语言,比如逻辑控制.循环操作.函数等都严重缺少或不足,尽管目前有了很流行的sass.less等css预处理器以便于编写css,但是实际上css的难处在于它的特性,css的属性毕竟太多了,每种属性还有不同的值,效果也各不相同.也难怪不少精通各种语言的大神看到css就头痛(比如这位) 在此总结一下遇到过的常见布局方式 两列布局 1.左侧固定,右侧宽度自适应 (1)通过浮动 https://jsfiddle.net/tgxh/y

css 中的grid布局基础

CSS Grid Layout为CSS引入了一个二维网格系统.网格可用于布局主要页面区域或小型用户界面元素. 网格是一组交叉的水平和垂直线 - 一组定义列,其他行.元素可以放在网格上,以行或者列为标准. grid布局的优点: 1:固定和灵活的轨道尺寸 2:可以使用行号,名称或通过定位网格区域将项目放置在网格上的精确位置.网格还包含一种算法,用于控制未在网格上显示位置的项目的放置. 3:在需要时添加其他行和列 4:网格包含对齐功能,以便我们可以控制项目放置到网格区域后的对齐方式,以及整个网格的对齐

CSS中的圣杯布局,以及圣杯布局与双飞翼布局的区别

为了解决中间宽度自适应,左右列固定宽度,最早出现的是圣杯布局,双飞翼布局是对圣杯布局的改良,同样这种 布局的优势在于在中间列中的文档可以优先渲染. 1.什么是圣杯布局 其实对于圣杯布局,前面一部分与双飞翼布局完全相同 <style>   .column{ float:left } .container{ width:100% } .column{ height:300px; }   #center_panel{ width:100%;  background-color:red; } #rig