弹性盒子布局:语法

块级元素转换成弹性盒子:{display:flex}

行内元素转换成弹性盒子:{display:inline-flex}

1.flex-direction:用来确认主轴的方向

  row(从左向右)相对于row-reverse(从右向左)
  column(从上向下)相对于column-reverse(从下向上)

2.flex-wrap:作用于子元素换不换行

  nowrap(不换行) wrap(换行,从上往下走)wrap-recerse(换行,从上往下走)

3.justify-content:定义子元素在主轴上对齐的方式

  flex-start(左对齐)flex-end(右对齐)center(居中)space-between(两端对齐)space-around(均分对齐)

4.align-items:交叉轴(Y轴)对齐方式

  flex-start(交叉轴的起点对齐)flex-end(交叉轴的终点对齐)center(居中)baseline(文字基线对齐)

5.align-content:定义多根轴线的对齐方式

  flex-start(起点对齐)flex-end(终点对齐)center(中点对齐)space-between(两端对齐)space-around(每根轴线的两端对齐)

时间: 2024-10-25 12:33:52

弹性盒子布局:语法的相关文章

弹性盒子布局解决不规则图片的等比例缩放的利器!

我们经常遇到这种需求: 在一个固定大小(固定比例)的容器里面展示图片,图片的大小比例都不是固定的,需要按容器的比例等比例缩图片上下左右居中显示. 在没有弹性盒子布局的年代,额的做法: 1:水平居中,非常好解决,容器 text-align: center; 2:垂直居中,容器display: table-cell; 图片vertical-align: middle; 3:等比例缩放,js解决,思路: (1)如果图片宽高都没有超过容器大小,则忽略 (2)如果图片的宽度或者高度其中有一方超过容器大小,

css横向 弹性盒子布局的一些属性

<head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/> <meta name="format-detection" content=&qu

CSS3总结五:弹性盒子(flex)、弹性盒子布局

弹性盒子容器的属性与应用 display:flex/inline-flex flex-direction flex-wrap justify-content align-items align-content flex-flow 弹性盒子子项的属性与应用 order align-self flex flex-grow flex-shrink flex-basis 弹性盒子布局 flex居中/T字布局 可动态增加导航栏 等分布局 圣杯布局 流式布局 一.弹性盒子容器的属性与应用 1.1.定义弹性盒

弹性盒子布局(flex布局)

弹性盒子布局方式:.box{ display:flex;}@设为Flex布局后,子元素的float.clear和vertical-align属性将失效@采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器".它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目".@容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis).主轴的开始位置(与边框的交叉点)叫做m

浅谈弹性盒子布局

 一.理解 CSS3 弹性盒布局模型 Web 应用的样式设计中,布局是非常重要的一部分.布局用来确定页面上不同组件和元素的尺寸和位置.随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率.响应式用户界面设计中最重要的一环就是布局.需要根据窗口尺寸来调整布局,从而改变组件的尺寸和位置, 以达到最佳的显示效果.这也使得布局的逻辑变得更加复杂.本文介绍的是 CSS3 规范中引入的新布局模型:弹性盒模型(flex box).弹性盒模型可以用简单的方式满足很多常见的复杂的布局需

CSS3弹性盒子--布局(2)

使用弹性盒子兼容低端适配有时需要: display:flex 和 display:-webkit-box display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; -moz-box-flex:3; -we

Flex弹性盒子布局

首先,设置伸缩盒的 display 有如下两个属性值: flex:将容器盒模型作为块级弹性伸缩盒显示 inline-flex:将容器盒模型作为内联级弹性伸缩盒显示 代码如下: /*大部分不需要前缀*/ div { display: flex; } 弹性布局的八个常用属性: 1.flex-directionflex-direction 属性和旧版本 box-orient 属性一样,都是设置伸缩项目的排列方式.代码如下: /*设置从上往下排列*/ div { flex-direction: colu

弹性盒子布局

最近在开发公司的平台系统,因为该项目主要是运行在移动端,所以采用了flex弹性布局.flex布局用起来很灵话,提高了开发效率.而且性能貌似比传统的浮动布局好. 1. 首先声明父元素布局方式为弹性布局 display: -webkit-flex; /* Safari */ display:flex; 2.然后设置横向主轴子元素排列方式 justify-content:flex-start | flex-end | center | space-between | space-around; fle

React Native 之 Flexbox(弹性盒子布局)

Flexbox可以在不同屏幕上提供一致的布局结构,一般使用flexDirection.justifyContent.alignItems三个样式来辅助设计. 1.flexDirection:在组件的style中设置可以决定其子组件的主布局(主轴),默认是竖直方向 - 纵轴‘colunm’(从上到下依次排列子组件),另一个是横向 - 横轴‘row’(从左到右依次排列子组件).   2.justifyContent:决定子组件按照主轴的排列方式 A.flex-start:  从起始 -> 结尾方向开