flex布局

阅读更多关于 flex布局

Flex语法 Flex布局意为"弹性布局"，用来为盒模型提供更多灵活性。此外，Flex定义的容器可以对块级元素( display: flex; )或行内元素( display: inline-flex; )生效，需要注意的是，如果父元素设置了Flex容器，则子元素的 float 、 clear 和 vertical-align 属性将失效。 Flex布局需要注意下面几个重要的概念，结合下面这张图也许能更好的理解: flex容器(flex container) flex项目(flex item) 主轴(main axis) 交叉轴(cross axis) 开始位置(start) 结束位置(end) 提示：定义在容器(container)上的属性和定义在项目(item)上的属性不可搞混! 关于语法的其余部分，请参考阮一峰的教程，希望你能熟记里面的示例图: Flex 布局教程: 语法篇 Flex 布局教程: 实例篇上面部分搞定，趁热打铁做一下下面的练习，做上两次基本上Flex就基本没问题了。 Flex训练游戏: 地址 Flex常规布局 1. 单列布局单列布局使用场景非常多，用来实现文本或者block的居中效果。对外部容器定义就可实现内部布局效果，实现起来非常简单，尤其是使用响应式布局中。以下示例都是Flex的基本使用语法。基本的DOM结构如下: <div class="parent

flex布局

阅读更多关于 flex布局

网页布局，是css的一个重要应用。传统的网页布局，主要是基于盒模型，和display、position、float属性，这些属性的一个优势就是简单，容易理解，但也有一些不方便的地方，比如在实现垂直居中的时候。 2009年，W3C提出了一种新的解决方案：Flex（Flexible Box，弹性布局）布局。设置为flex布局的容器称为flex容器，flex容器的子元素称为容器项目（flex item）。将元素设置为flex布局后，子元素的float、clear、vertical-align属性将失效。 Flex布局的一些基本概念 Flex容器默认有两根轴，水平的主轴（main axis）和垂直的交叉轴（cross asix）。主轴的开始位置叫做main start，主轴的结束位置叫做main end。交叉轴的开始位置叫做cross axis，交叉轴的结束位置叫做cross end。容器项目默认沿主轴排列，单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。 Flex容器的一些属性 flex-direction flex-wrap flex-flow justify-content align-items align-content 1.flex-direction：容器的方向有4个值： row（默认值）：主轴为水平方向，起点在左侧 row

Flex布局

阅读更多关于 Flex布局

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的 float 、 clear 和 vertical-align 属性将失效。任何一个容器都可以指定为Flex布局。 #box{ display: flex; width: 500px; height: 300px; border: 10px solid red;}一：有六个属性设置在box父容器上，来控制子元素的显示方式；分别是： flex-direction 设置主轴对齐方式默认 row x轴从左到右； flex-wrap 子元素换行的方式默认nowrap ； flex-flow flex-direction和flex-wrap的简写默认row nowrap； justify-content 子元素的对齐方式默认flex-start 左对齐 align-items align-content 1、flex-direction 决定主轴的对齐方向，分别有四个属性： row （默认值）：主轴为水平方向，起点在左端。 row-reverse ：主轴为水平方向，起点在右端。 column ：主轴为垂直方向，起点在上沿。 column-reverse ：主轴为垂直方向，起点在下沿。 #box{ display: flex; flex-direction:

web前端入门到实战：五个最新的CSS特性以及如何使用它们

阅读更多关于 web前端入门到实战：五个最新的CSS特性以及如何使用它们

虽然CSS简单，但CSS是一门非常有意思的语言，CSS每年都有变化，而且都有不同的博主都在不同的时间段总结一些CSS的新特性。虽然这些新特性无法立刻得到众多浏览器的支持，但总是随着时间的发展，这些特性都会得到浏览器的支持。哪怕未得到支持，也有一些方法让浏览器支持，比如最为出外的 cssnext ，就可以让很多未来的CSS特性就立马使用，并且不用花太多时间来考虑浏览器的兼容性。接下来要介绍的五个CSS新特性是： CSS Display Module Level 3 ： display:contents CSS Conditional Rules Module Level 3 ： @support(...){...} CSS Overscroll Behavior Module Level 1 ： overscroll-behavior: contain CSS Selectors Module Level 4 ： :focus-within ， :placeholder-shown CSS Containment Module Level 1 ： contain:paint 这些CSS特性，估计有些同学已经接触过了，如果你未接触过，建议你继续跟随着下面的步骤继续往下阅读。案例：创建一个新闻提要（Newsfeed）通过一个新闻提要为例

响应式布局：flex

阅读更多关于响应式布局：flex

flex-direction属性决定主轴的方向（即项目的排列方向）。 Flex-wrap:一行排不下的时候换行 justify-content属性定义了项目在主轴上的对齐方式。 align-items属性定义项目在交叉轴上如何对齐。 align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。项目属性：order；flex-grow；flex-shrink；flex-basis；flex；align-self Order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 Flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 Flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 Flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。 Flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 Align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素

CSS伸缩布局

阅读更多关于 CSS伸缩布局

1. 伸缩布局应用: 伸缩布局应用主轴： Flex容器的主轴用来配置Flex项目，默认是水平方向侧轴：与主轴垂直的轴称为侧轴，默认还是垂直方向方向：默认是主轴从左向右，侧轴默认是从上到下主轴和侧轴并不是固定不变的通过flex-direction可以互换 min-width 设置px 到达设置的这个值就不在缩放了 max-width 跟上面这个相反 flex 可以放在每个盒子里面自由调整需要给盒子添加display: flex; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> section { width: 80%; height: 200px; border: 1px solid pink; margin: 100px auto; /*给父级盒子添加flex*/ display: flex; /*伸缩布局模式*/ } section div { height: 100%; flex: 1; /*每个子盒子占的份数*/ } section div:nth-child(1) { background-color: pink; } section div:nth-child(2) { background-color:

Flex布局

阅读更多关于 Flex布局

一、什么是Flex布局？ Flex是Flexible Box的缩写，顾名思义为“弹性布局”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex 布局。 .box{ display:flex; } 　　行内元素也可以使用Flex布局。 .box{ display:inline-flex; } 　　webkit内核的浏览器，必需加上-webkit前缀 .box{ display:-webkit-flex; display:flex; } 二、容器的属性以下6个属性设置在容器上。 flex-direction flex-wrap flex-flow justify-content align-items align-content 3.1 flex-direction属性 flex-direction属性决定主轴的方向（即项目的排列方向）。 .box{ flex-direction:row | row-reverse | column | column-reverse; } 3.2 flex-wrap属性默认情况下，项目都排在一条线（又称“轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行？ .box{ flex-wrap: nowrap | wrap | wrap-reverse; } // nowrap（默认）：不换行 wrap:换行

自适应的一些小问题

阅读更多关于自适应的一些小问题

写html自适应的时，有些时候你包了一个块之后，在里面插入图片，设置了不超过盒子的宽高。图片却并不会在盒子里面。它会溢出。遇到这个问题是基线对齐的问题，这个时候你可以去改变它的基线对齐方式，verticle-middle，或者verticle-top。之类的语句去改变它对齐的方式。让他回到盒子内部。当年在正常块盒排版的时候，你已经在通配符里面设置了margin:0;padding:0;但是在网页中显示的时候，上下块盒之间会出现莫名其妙的间距，检查的时候，也没有显示他们有margin，这个时候可以通过弹性布局里面的竖直排列来解决这个问题display:flex;flex-direction:column; 来源： https://www.cnblogs.com/gao2/p/11356280.html

知识积累

阅读更多关于知识积累

(迁移自旧博客2017 08 27) ps -e | grep apache 查看进程（个人理解） ./ 这种写法后面都跟一个脚本文件用来执行脚本 service apache2 status 显示apache2服务的当前状态 ./mysql -uroot -p123456 (root为用户，123456为密码)运行mysql css类名选择器：class 中同时包含 important 和 warning 的所有元素有银色的背景 .important.warning {background:silver;} css flexbox布局: 点这里～飞机票 flex-direction 属性规定灵活项目的方向: 详细用法 CSS3特有的选择器，E > F 表示选择E元素的所有子F元素，与E F的区别在于，E F选择所有后代元素，>只选择一代。没有<的用法。 E >*表示选择E元素的所有子元素。 css flex布局： justify-content (适用于父类容器上) 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。 display:flex; justify-content:space-between; 下面的注册帐号以及忘记密码：（比较常用）来源： https://www.cnblogs.com/ym7583306/p/10390483.html

CSS3 Flexbox属性与弹性盒模型学习笔记

阅读更多关于 CSS3 Flexbox属性与弹性盒模型学习笔记

以下为个人认为有必要记录的笔记不喜勿喷 Flex属性和弹性盒模型概述弹性盒布局基本概念 flex container flex item main axis和cross axis main start和main end cross start和cross end main size和cross size 针对flex容器的属性 flex-direction flex-wrap flex-flow 针对flex条目的属性 order flex-basis flex-grow flex-shrink flex条目的对齐基于margin: auto对齐基于主轴对齐基于交叉轴对齐 flex行的对齐 flex复合属性 Flex属性和弹性盒模型概述以下几种属性设置在弹性盒布局中是不起作用的：浮动元素（float）清除浮动（clear） css3多列布局（columns-*）垂直居中（vertical-align）首行/首字符选择伪类（::first-line和::first-letter）有的flex属性只能作用于flex容器，而有的flex属性只能作用于flex条目。传统的布局方案中: 块级布局（block）默认是将各个块级元素按照垂直方向自上向下依次堆放；内联布局（inline）默认是将各个内联元素按照水平方向按照从左到右的顺序依次堆放。弹性盒布局

订阅 flex布局