1、display: flex; 指定flex布局方式2、flex-direction: row | row-reverse | column | column-reverse指定主轴方向3、flex-wrap: nowrap / wrap / wrap-reverse指定换行行为（体现在辅轴上）4、justify-content: flex-start | flex-end | center |
原创
2022-05-01 19:17:45
177阅读
css 倒影 -webkit-box-reflect的基本语法-webkit-box-reflect: [ above | below | right | left ]? <length>? <i
转载
2022-07-12 16:28:13
423阅读
.icons{ /*flex-box布局，子元素可以按需缩放*/ display: -webkit-box; display: -moz-box; display: -ms-box; display: -o-box; display: box;
原创
2016-01-07 17:08:18
709阅读
【注：本文所有的代码和实例仅在chrome和safari等webkit内核的浏览器测试通过】如果说从web Pages 能够转到web app时代，那么css3和html5其他相关技术一定是巨大的功臣。唯一的遗憾就是pc端浏览器的泛滥导致了我们不得不走所谓的优雅降级，而且这种降级是降到新技术几乎木有...
原创
2022-08-18 15:49:19
484阅读
CSS3 Flex Box（弹性盒子） 一、简介 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一
转载
2018-07-24 11:13:00
199阅读
2评论
弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。一、浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。紧跟在数字后面的 -webkit- 或 -...
转载
2020-02-10 11:15:00
148阅读
2评论
webkit-box1、之前要实现横列的web布局，通常就是float或者display：inline-block; 但是都不能做到真正的流体布
原创
2023-05-19 14:27:57
567阅读
个人网站:【 海拥】【摸鱼小游戏】 风趣幽默的人工智能学习网站：人工智能 想寻找共同学习交流的小伙伴，请点击【全栈技术交流群】免费且实用的前端刷题（面经大全）网站：点击跳转到网站在这篇文章中，我将展示如何使用 css 和一些 JavaScript 来设计棋盘。
为此，你需要对 CSS Flex-box 和 nth-child() 属性有基本的了解。所以让我们开始吧......
我们将为每
原创
2022-05-23 21:03:27
229阅读
box-flex ------------- 设置子元素如何分配剩余父元素的
原创
2023-06-26 07:00:20
117阅读
发现： 最近在做移动端的东西，说起移动端弹性盒子布局真是无往不利，用起来特别爽，我也是偶尔间发现的这个属性并且它的用法，在网上基本查不到这个属性的资料（个人看法）。如果没有听说过（display:box）的朋友建议去别人家的博客看看CSS3就可以直接command+w了，由字看意，是不是能联想到 d
转载
2016-04-14 11:38:00
184阅读
2评论
可以实现水平等分切割等。日后在研究，做个记录。 首先要声明：display:box，像谷歌浏览器要加前缀识别码：display:-webkit-box; 然后才开始使用其属性，同时也是要带上前缀识别码。 参考： flex: http://www.ruanyifeng.com/blog/2015/07
转载
2016-12-11 16:50:00
264阅读
2评论
今天看到蓝色理想上面有一篇文章讲《css3弹性盒模型布局模块介绍》里面讲到用box-flex，突然觉得有点心慌，上次看到响应式网页设计里面 也同样讲到flex box自适应布局，而上次竟然没有引起自己的注意，想深入研究一下，竟然给忘记了，于是就在这种不断的忘记中彻底变成outer。今天借此机会，好好充电 一下，看了adou写的关于box-flex的文章，发现里面存在一些问题，冒昧更正
转载
精选
2013-02-21 16:03:44
548阅读
box-flex==按比例分配父标签的宽度or高度空间1、非固定分配eg.一块地总150平方分配给三孩子，按照2:1:1分#老大 { 房子-分配: 2; } = 75平#老二 { 房子-分配: 1; } = 37.5平#老三 { 房子-分配: 1; } = 37.5平如果转换成CSS表示就是：
原创
2021-07-20 16:05:10
129阅读
开发者需要了解的WebKit https://.infoq.cn/article/webkit-for-developers 开发者需要了解的 WebKit 彭超 2013 年 3 月 18 日 话题：JavaScriptHTML5语言 & 开发 Paul Irish是著名的前端开发工程师，同
转载
2018-11-09 14:56:00
117阅读
2评论
CSS flexible Box Layout 弹性盒模型针对用户界面设计进行了优化，弹性容器的子元素可以在任何方向上排布。元素可以弹性伸缩。从而使子元素可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素...
原创
2021-08-13 11:58:53
295阅读
# CSS在WebKit和Chromium中的实现 ## 概述 前面章节介绍了CSS的三种基本要素，大概可以分成选择器，各种基本样式和CSS3引入的变形、变换和动...
转载
2022-01-07 17:22:16
290阅读
1. flex左边固定宽度,右边自适应:#left {
width: 200px;
}
#right {
flex: 1;
min-width: 0; // 解决右边内容超出的话,会导致左边固定的宽度大小不起重要了
}2. flex布局下怎样实现text-overflow: ellipsis效果?.flex{
display:flex;
border:
原创
2023-10-12 09:54:49
121阅读
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; } body{ width:100%; } div{ width:600px; height:
原创
2022-06-27 10:51:44
168阅读
CSS Box Shadow
今天看到一个在IE下面也可以实现CSS Box Shadow的方法，感觉不错在这里给大家分享一下！
先说一下这个方法的关键：
1：有两层DIV。2：最外层一定要有background-color和filter属性。3:内层一定要有position（absolute and relative）和background-color。4：内层外层的宽高要
转载
精选
2011-11-27 22:08:23
496阅读
点赞
