flex布局

FLEX布局是什么？ .box{ display: flex; } Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性 设置为Flex布局后，子元素的 float 、 clear 和 vertical-align等 属性将失效。 二、Flex基本概念 用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。 它的所有子元素自动成为容器成员，称为 Flex 项目（flex item）。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。 三、Flex容器的属性 flex-direction 属性决定主轴的方向（即项目的排列方向）。 flex-wrap 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。 flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 justify-content justify-content属性定义了项目在主轴上的对齐方式。 align-items align-items属性定义项目在交叉轴上如何对齐。 align-content align-content属性定义了多根轴线的对齐方式

flex 即为弹性布局。 　　任何一个容器都可以指定为flex布局。 　　　　.box{display:flex} 　　行内元素可以使用flex布局 　　　　.box{display: inline-flex} 　　webkit内核的浏览器必须加上-webkit 前缀。 　　　　.box{display:-webkit-flex; display:flex;} 　　注意：元素设置flex布局以后,子元素得float ,clear 和 vertical-align 属性将失效。 　　基本概念： 　　　　采用flex布局的元素称之为flex容器，它的所有子元素自动成为容器成员，称为flex 　　　　项目。 　　　　容器默认存在两根轴，水平的主轴（main axis） 和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start, 结束位置叫做 main end ； 　　　　　　交叉轴的开始位置叫做cross start,结束位置叫做 cross start,技术位置叫做 cross end. 　　单个项目占据的主轴空间叫做 main size 占据的交叉轴空间叫做cross size. 容器的属性： 　　有6个属性设置在容器上。 　　　　flex-direction 　　 flex-wrap 　　 flex-flow 　　 justify

前言 最近好久都没有写博客了，可能是因为公司项目业务需求变少，也可能是我个人心里的一些放松。从公司5月份裁掉安卓客户端负责人之后，我就顺利成了安卓的负责人，但是薪资待遇却和之前一样没有变化，然后又不敢跳槽，才会出现现在这种学习热情底下，每天昏昏沉沉的感觉。 作为一名安卓开发，有那么多年的工作经验，但是有一些技术知识却只会使用，在面试的时候却无法真正的说清楚，这就会导致面试过程的吃亏。所以我打算在目前的工作岗位上学习Web知识，为大前端开发做准备，下面我就我个人对前端的一些学习经历，希望能对大家有帮助。 孔子说，三人行，必有我师焉。我在网上找了一个经历和我大致相同的人作为我的老师。 《Web前端入门的自学路线》 ，根据这个学习路线，我大致掌握了前端开发的知识结构。 看完这个项目之后，我一定对web开发技术架构有了大致的了解，但是如果要真正的开发，我心里还是有许多不明所以的地方。 1）前端页面如何排版？还有就是我们写的web页面如何兼容手机客户端？ 2）访问网络使用jQuery的Ajax异步请求如何实现页面的刷新？ 3）web前端开发基础知识的掌握情况，怎么才能证明对基础知识有一定程度的掌握？ 4）有没有比较好的初级项目可以练手？ 作为一个安卓开发程序员，很大程度上被开源项目的增多影响，很大程度上我们开发都是在拷贝别人的代码，而不是自己静心去思考一个功能该如何去实现。 但是有句话说的是

1.text-shadow 文字阴影 2.background-size：背景图大小 经常用于ios手机端的sprite图，先等比缩小一倍，再取值 3.display:flex 拉伸布局 给父元素 子元素用flex：1 3.min-with：最小宽度不能小于多少 4.max-with：最大宽度不能大于多少 5.animation 动画 必须用@keyframes声明后调用 6.background：linear-gradient（位置，颜色，渐变后颜色） 线性渐变 7.transition:过度 8.transform：变形 和相对定位相识 translate（）移动 rotate（deg）旋转 scale（）缩放 9.transform-origin: 旋转中心点 10.box-sizing：border-box 内减模式 来源： https://www.cnblogs.com/zjfman/p/11512105.html

【前言】2019.9.10 【内容】项目属性 BFC IFC FFC GFC 文档流 脱离文档流… [主体]order、flex-grow、flex-shrink、flex-basis、flex、align-self… 项目属性： 设置容器内项目相关样式，用于设置项目的尺寸、位置，以及对项目的对齐方式做特殊设置。 项目元素属性集合： order、flex-grow、flex-shrink、flex-basis、flex、align-self 项目属性： ①沿主轴方向上的排列顺序order: 0（默认值） | <integer整数> ②项目的收缩因子flex-shrink: 1（默认值） | ③项目的扩张因子flex-grow: 0（默认值） | ④项目width属性替代品flex-basis: auto（默认值） | px ⑤flex-grow、flex-shrink、flex-basis的简写方式：flex 属性 ⑥项目在行中交叉轴方向上的对齐方式align-self: auto（默认值） | flex-start | center | flex-end | baseline |stretch order属性作用：设置项目沿主轴方向上的排列顺序，数值越小，排列越靠前，属性值为整数。 flex-shrink属性作用： 时当项目在主轴方向上溢出，通过设置项目收缩因子来压缩项目适应容器

使用flex弹性盒子布局，在标签元素的布局可以起到很好的作用。 案例如下。 需求： 一行显示3个带图标的选项，选项平分。 代码如下。 html： <div class="titleItem"> <a href="#" class="item"> <img src="../images/indexIcon/huiyuanfuli.png" alt=""> <span>四个字的</span> </a> <a href="#" class="item"> <img src="../images/indexIcon/huiyuanzhuanxiang.png" alt=""> <span>四个字的</span> </a> <a href="#" class="item"> <img src="../images/indexIcon/jianyifankui.png" alt=""> <span>四个字的</span> </a> <a href="#" class="item"> <img src="../images/indexIcon/longtengfenghui.png" alt=""> <span>四个字的</span> </a> <a href="#" class="item"> <img src="../images/indexIcon/ruhuibiaozhun.png"

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } Webkit 内核的浏览器，必须加上 -webkit 前缀。 .box{ display: -webkit-flex; /* Safari */ display: flex; } 注意，设为 Flex 布局以后，子元素的 float 、 clear 和 vertical-align 属性将失效。 二、基本概念 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start ，结束位置叫做 main end ；交叉轴的开始位置叫做 cross start ，结束位置叫做 cross end 。 项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size ，占据的交叉轴空间叫做 cross size 。 三、容器的属性

移动端页面开发资源总结及技巧 工作了有一段时间，基本上都在搞移动端的前端开发，工作的过程中遇到过很多问题，bug的解决方案，记录下来，以便后用！！！内容并不是很全，以后每遇到一个问题都会总结在这里，分享给大家！ 一、meta标签相关知识 1、移动端页面设置视口宽度等于设备宽度，并禁止缩放。 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 2、移动端页面设置视口宽度等于定宽（如640px），并禁止缩放，常用于微信浏览器页面。 <meta name="viewport" content="width=640,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 3、禁止将页面中的数字识别为电话号码 <meta name="format-detection" content="telephone=no" /> 4、忽略Android平台中对邮箱地址的识别 <meta name="format-detection" content="email=no" /> 5、当网站添加到主屏幕快速启动方式

1，flex布局是个什么东西？ 官方说法：Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 民间说法：flex 就是一种布局方式，类似于 block，inline-block等。 2，flex涉及的概念 Flex的基本作用就是让布局变的更简单，比如“垂直居中”等，当然不止这个，要说清楚flex有什么作用首先要了解一些概念。 采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。 主要记住 “容器”、“项目”、“主轴（横轴）”和“交叉轴（纵轴）”的意思和指向就行。 3，容器的属性 3.1 flex-direction flex-direction 决定主轴的方向（即项目的排列方向）。它有4个可能的值 ： row（默认值）

css3 flex布局，文字超出显示省略号 在那个文字的父元素加上min-width:0; < div class = "box" > < div class = "flex1" > < img /> </ div > < div class = "flex2" > < p > css3 flex布局，文字超出显示省略号css3 flex布局，文字超出显示省略号 </ p > </ div > </ div > .box { display : flex ; } .flex1 { width : 50 px ; } .flex2 { flex : 1.0 ; min-width : 0 ; white-space : nowrap ; overflow : hidden ; text-overflow : ellipsis ; font-weight : normal ; } 来源： CSDN 作者： huangwenhui1234 链接： https://blog.csdn.net/qq_17134765/article/details/71699840