首页 > 其他分享 >CSS:Flex布局

CSS:Flex布局

时间:2023-06-28 17:25:59浏览次数:36  
标签:Flex flex 布局 cross 主轴 叫做 main CSS

什么是Flex布局

任何一个容器都可以指定为 Flex 布局。

.box{
  display: flex;
}

基本概念

采用 Flex 布局的元素,称为 Flex 容器(flex container)

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

容器的属性

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

标签:Flex,flex,布局,cross,主轴,叫做,main,CSS
From: https://www.cnblogs.com/marshban/p/17511952.html

相关文章

  • css border不能同时设置圆角和 border-image
    如标题,cssborder不能同时设置圆角和border-image,当我想要实现既有圆角,并给圆角加border-image的时候,发现无法同时生效,只有border-image会生效。 <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatibl......
  • css屏蔽图片长按选中下载
    在移动端开发中,我们通常不希望页面的图片被长安选中可下载,会禁用图片选中事件,这时,css不能使用通配符全局设置 pointer-events:none; 否则会把所有点击事件禁用。解决方案img{box-sizing:border-box;-moz-user-select:none;-webkit-user-select:none;-ms-us......
  • CSS精灵技术
    一、CSS精灵需求: 当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。然而,一个网页中往往会用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。为了有效地减少服务器接受和......
  • CSS :last-child选中不了元素
    1.情况:当div:finaincingMark-right-item后还有div:sliderLine时,使用finaincingMark-right-item:last-child无法选中finaincingMark-right-item遍历后的最后一个div:finaincingMark-right-item,同时也没选中div:sliderLine,样式并不能选中任何一个div 2.解决:使div:finaincingMark-righ......
  • CSS中实现元素居中的七种方法总结
    在前端开发中,经常需要将元素居中显示,CSS提供了多种技术方法来实现元素的居中,在不同场景下有不同的使用方法、不同的效果,需要特别记住它们的应用场景才能够正常的居中。这篇文章就大致总结一下CSS中的居中方法。一、元素分类在CSS中,元素大致可以分为以下几种:1.块级元素(Block-l......
  • CSS font-weight
    主要理解UI给得英文名对应得数值字体粗细:‘font-weight’属性名称:font-weight取值:normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900初始:normal适用于:  所有元素继承:是百分比:  (不适用)媒介:视觉计算值:  详见描述动画:-‘......
  • css grid布局(网格布局)笔记
    Grid布局网格布局的基本概念CSS网格布局引入了二维网格布局系统,可用于布局页面主要的区域布局或小型组件。什么是网格?网格是一组相交的水平线和垂直线,它定义了网格的列和行。我们可以将网格元素放置在与这些行和列相关的位置上。网格布局的特点:固定的轨道尺寸或者弹性......
  • Firebug调试CSS布局
    Firebug与CSS布局  译/raywill  当CSS盒子之间没有正确的对齐的时候,可能很难找到原因。这时候可以用Firebug来测量一下盒子的偏移、外边距(margin)、内边距(padding)以及大小(size)。玩CSS,离不开它!     盒模型阴影在css中,所有元素都适用于盒模型,拥有margin、border、padding和具......
  • 3-布局
    1-示例代码importPySimpleGUIassgsg.theme('GrayGrayGray')layout=[[sg.Text('ThisisLineone')],[sg.Text('ThisisLinetwo')],]#创造窗口window=sg.Window('WindowTitle',layout)事件监......
  • css居中(自己常用的)
    水平居中:1.text-aligin:center  如果仅使用 text-aligin:center   是无法达到水平居中的效果的,为什么?text-aligin:center  需要在行内块元素上使用的,而盒子是块级元素,所以,需要将盒子转换为行内块元素 text-aligin:center  才能生效。<divstyle="text-align:cen......