flex in css

// display-flex:
container:

flex-flow:flex-direction || flex-wrap‘
justify-content // main axis place method - 5 values : flex-start|flex-end|center|space-between|space-around
align-items // cross axis place method(all ele as one row) - 6 values : stretch(default) | flex-start | flex-end | center | space-between | space-around
align-content //corss axis line place methos(per axis line as one row) 6 valus: stretch | flex-start | flex-end | center | space-between | space-around

child:
order: <integer>
flex-grow:<number> // default value:0 it‘s mains that even container remains spare space ,the child don‘t stretch.
flex-shrink:<number> // defalut value :1 auto condense
flex-basis : auto ?
flex: flex-grow || flex-shrink || flex-basis
align-items : // default is auto,it mains inherit parent flex property - auto | flex-start | flex-end | stretch | center | baseline

  

时间: 2024-10-14 23:41:46

flex in css的相关文章

bootstrap4中自带flex的css类

bootstrap4采用flex布局,一些css样式默认自带flex.也就是说在使用以下css的时候,不用在添加d-flex来定义flex,可以直接在里边添加flex属性(justify-content等). .row .form-row .form-inline .form-inline .form-group .form-inline .form-check .btn-toolbar .input-group .input-group > .custom-file .input-group-

flex布局-css

1.html <div id="parent"> <div id="child1"></div>  <div id="child2"></div>  <div id="child3"></div> </div> 2.css-----父级postion不能是absolute!! 1)child1 固定宽度,child2因child3的

快速学习Flex模型布局-兼容新旧版本css

最近在学习Flex模型布局 ,刚开始,各种属性看着头疼,现在坚持下来,把自己的学习经验分享一下: Flex模型 发展下来分三个版本: 标准版本(flex | inline-flex).混合版本(flexbox | inline-flexbox).最老版本(box | inline-box); 标准版本:IE11+已经支持啦,其他标准浏览器只要做一下兼容webkit: 混合版本:可以说是IE版本,就只有ie支持 最老版本:建议抛弃吧 --------------------------------

2017年要学习的三个CSS新特性

2017年要学习的三个CSS新特性 这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东西要学习.尽管CSS有很多新的特性,但有三个特性令我最激动并进行学习. 1. Feature Queries(特性查询) 在这之前我写了一篇关于Feature Queries的文章the one CSS feature I really want.现在,它已经在这里了!目前所有主流浏览器都支持特征查

一些你不知道的CSS属性

Box-sizing 尽管box-sizing在CSS3中才被引入,其有一个值是border-box,让元素的高和宽包含了填充和边框. .div { width: 150px; height: 100px; border: 1px solid #ccc; box-sizing: border-box; } Chrome 31+, IE8+, Firefox 31+, Safari 7+, Opera 27+, iOS Safari 7.1+ and Android Browser 4.1+等都支

在移动端中的flex布局

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

CSS元素垂直居中的几种方法

在网页响应式布局中,实现水平居中很简单.可是,垂直居中方面,元素的宽度和高度是不可控的,所以很多办法并不适用. 总结了下平时用到的垂直居中的几种办法: demo中HTML代码: <div class="center"> <span></span> </div> 一:使用table-cell; CSS代码: .table{ display: table; width: 100%; height: 100%; } .center{ displ

css垂直居中的6种方法

1.通过verticle-align:middle实现CSS垂直居中. 通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注意,vertical生效的前提是元素的display:inline-block. 1 .parents{ 2 background:#ff6600; 3 height:300px; 4 } 5 .children{ 6 background:#ff0000; 7 widht:50%; 8 height:50%; 9 disp

等高分栏布局小结

上一篇文章<圣杯布局小结>总结了几种常见的分栏布局方法,这几个方法都可以实现多栏页面下,所有栏的高度可动态变化,某一栏宽度自适应的布局效果,能满足工作中很多布局需求.后来我在搜集更多关于分栏布局的文章时,发现了一个新的问题,这个问题在前面那篇文章中也有朋友在评论里跟我提起,就是如何在实现分栏布局的同时保证每栏的高度相同.我发现这种等高分栏布局的情况,在网站里面其实也很常见,所以本文总结了几种可用的方法来解决这个新的需求. 1. 方法一:万能的flex 跟上篇文章不同,这次把flex这种方法放在