前端开发

Grid布局Flex布局水平和垂直居中

2022-04-121467次阅读flexboxGrid
Grid布局Flex布局水平和垂直居中
前端开发

Grid 用于布局,Flexbox 用于组件

2022-03-29994次阅读flexboxGrid网格布局
CSS Grid和 flexbox 之间的主要区别。CSS Grid 是一个多维布局模块,这意味着它有列和行。Flexbox 可以将其子项布局为列或行,但不能两者兼而有之。
前端开发

Flexbox弹性布局中的文本省略号实现

2020-07-272127次阅读flexbox
省略号效果可以通过text-overflow,white-space和overflow属性组合来实现。Flexbox弹性布局中的文本省略号实现技巧是使用属性min-width:0。
前端开发

flex属性实战解读

2019-07-132148次阅读flexbox
flex是Flex项目属性是flex-grow、flex-shrink和flex-basis属性的简写。
前端开发

iOS 9.3.5在Safari中Flexbox内容重叠问题

2019-06-242525次阅读flexbox
试试给所有子元素添加flex:1 0 auto;
前端开发

拥抱Flexbox弹性布局基本概念之Flex容器

2019-05-291916次阅读flexbox
长期以来使用表格、浮动、清除浮动、行内块元素和其他CSS属性来布局网站内容。当制作一些复杂的页面时就比较吃力,不得不使用css Hack、css黑魔法来实现,例如水平垂直居中,等高布局等。Flexbox的目的就是改变这一切,最起码可以让你告别浮动、清除浮动。。。让布局更简单更智能。注: Flexbox布局最适合应用程序的组件和小规模布局,而Gird布局则适用于较大规模的布局。
前端开发

flex中的margin:auto水平垂直居中深入理解

2019-05-245775次阅读flexbox
我们都知道通过Flex容器+Flex项目的margin:auto;可以轻轻松松实现水平垂直居中。还真没有深入探究margin:auto是如何做到的。直到今天无意间看到《探秘flex上下文中神奇的自动margin》一文,作者解释的很好,所以这里做一下笔记。理解的重点还是在BFC(块格式化上下文) 、FFC(Flex格式化上下文)、GFC(Grid格式化上下文)。
前端开发

拥抱Flexbox弹性布局基本概念之Flex项目

2019-05-162094次阅读flexbox
上一篇介绍了Flex容器属性,本文将介绍Flex项目属性order、flex-grow、flex-shrink、flex-basis、flex、align-self。