flex 布局示例
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>flex实例</title>
<style>
* {
font-family: "微软雅黑";
} html,
body {
margin: 0;
padding: 0;
} h2 {
font-size: 20px;
} h3 {
font-size: 18px;
font-weight: normal;
} .box {
padding: 20px;
border-bottom: 1px dashed #aaa;
} .box:after {
content: "";
display: block;
width: 100%;
line-height: 1px;
clear: both;
} .demo {
background: #f1f1f1;
padding: 5px;
box-sizing: border-box;
box-shadow: 5px 5px 10px #ddd;
margin-right: 5%;
margin-bottom: 10px;
width: 45%;
float: left;
} .container {
display: -webkit-flex;
display: flex;
} .container div:nth-child(1) {
background: #D8614C;
} .container div:nth-child(2) {
background: #43BBD2;
} .container div:nth-child(3) {
background: #6EC342;
} .container div {
min-height: 50px;
color: #fff;
text-align: center;
line-height: 50px;
background: #006699;
} .item {
width: 100px;
margin: 0 10px 10px 0;
}
</style>
</head> <body> <div class="box">
<h2>[flex] 弹性盒模型布局</h2>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<div class="container" style="flex-direction:row;">
<div style="width: 100px;">100px</div>
<div style="flex: 2;">flex: 2;</div>
<div style="flex: 1;">flex: 1;</div>
</div>
</div>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<div class="container">
<div style="width: 150px;margin-right:10px;">150px,mright=10</div>
<div style="flex: 1;">flex: 1;</div>
<div style="width: 150px;margin-left:10px;">150px,mleft=10</div>
</div>
</div>
</div> <div class="box">
<h2>[ flex-direction ] 元素开始方向</h2>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>flex-direction:row /* defalut */;</h3>
<div class="container" style="flex-direction:row;">
<div style="flex: 3;">flex: 3;</div>
<div style="flex: 2;">flex: 2;</div>
<div style="flex: 1;">flex: 1;</div>
</div>
</div>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>flex-direction:row-reverse;</h3>
<div class="container" style="flex-direction:row-reverse;">
<div style="flex: 3;">flex: 3;</div>
<div style="flex: 2;">flex: 2;</div>
<div style="flex: 1;">flex: 1;</div>
</div>
</div>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>flex-direction:column;</h3>
<div class="container" style="flex-direction:column;">
<div style="flex: 3;">flex: 3;</div>
<div style="flex: 2;">flex: 2;</div>
<div style="flex: 1;">flex: 1;</div>
</div>
</div>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>flex-direction:column-reverse;</h3>
<div class="container" style="flex-direction:column-reverse;">
<div style="flex: 3;">flex: 3;</div>
<div style="flex: 2;">flex: 2;</div>
<div style="flex: 1;">flex: 1;</div>
</div>
</div>
</div> <!-- 是否换行 -->
<div class="box">
<h2>[ flex-wrap ] 元素是否换行</h2>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>flex-wrap:nowrap; /* default */</h3>
<div class="container" style="-webkit-flex-wrap:nowrap; border:1px dashed #666;">
<div style="width: 100px;">100px</div>
<div style="width: 200px;">200px</div>
<div style="width: 300px;">300px</div>
</div>
</div>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>flex-wrap:wrap; </h3>
<div class="container" style="-webkit-flex-wrap:wrap;border:1px dashed #666;">
<div style="width: 100px;">100px</div>
<div style="width: 200px;">200px</div>
<div style="width: 300px;">300px</div>
</div>
</div>
</div> <!-- 横向排版 -->
<div class="box">
<h2>[ justify-content ] 元素横向排版</h2>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>justify-content:flex-start; /* default */</h3>
<div class="container" style="justify-content:flex-start; border:1px dashed #666;">
<div style="width: 100px;">100px</div>
<div style="width: 200px;">200px</div>
</div>
</div>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>justify-content:flex-end; </h3>
<div class="container" style="justify-content:flex-end; border:1px dashed #666;">
<div style="width: 100px;">100px</div>
<div style="width: 200px;">200px</div>
</div>
</div>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>justify-content:center; </h3>
<div class="container" style="justify-content:center; border:1px dashed #666;">
<div style="width: 100px;">100px</div>
<div style="width: 200px;">200px</div>
</div>
</div>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>justify-content:space-between; /* default */</h3>
<div class="container" style="justify-content:space-between; border:1px dashed #666;">
<div style="width: 100px;">100px</div>
<div style="width: 200px;">200px</div>
</div>
</div>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>justify-content:space-around; /* default */</h3>
<div class="container" style="justify-content:space-around; border:1px dashed #666;">
<div style="width: 100px;">100px</div>
<div style="width: 200px;">200px</div>
</div>
</div>
</div> <!-- 纵向排版 -->
<div class="box">
<h2>[ align-self ] 元素纵向排版，用在子元素上</h2>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<div class="container" style="height:200px; border:1px dashed #666;">
<div style="flex:1;align-self: flex-start;">align-self: flex-start;</div>
<div style="flex:1;align-self: center;">align-self: center;</div>
<div style="flex:1;align-self: flex-end;">align-self: flex-end;</div>
</div>
</div>
<div class="demo">
<h3> </h3>
<div class="container" style="height:200px; border:1px dashed #666;">
<div style="flex:1;align-self:auto;">align-self:auto; /*default*/</div>
<div style="flex:1;align-self: baseline;">align-self: baseline;</div>
<div style="flex:1;align-self: stretch;">align-self: stretch;</div>
</div>
</div>
</div> <div class="box">
<h2>[ align-items ] 元素纵向排版，用在父元素上</h2>
<div class="demo">
<h3>align-items:flex-start;</h3>
<div class="container" style="height:200px; border:1px dashed #666;align-items:flex-start">
<div style="flex:1;">1</div>
<div style="flex:1;">2</div>
<div style="flex:1;">3</div>
</div>
</div>
<div class="demo">
<h3>align-items:center;</h3>
<div class="container" style="height:200px; border:1px dashed #666;align-items:center">
<div style="flex:1;">1</div>
<div style="flex:1;">2</div>
<div style="flex:1;">3</div>
</div>
</div>
<div class="demo">
<h3>align-items:flex-end;</h3>
<div class="container" style="height:200px; border:1px dashed #666;align-items:flex-end">
<div style="flex:1;">1</div>
<div style="flex:1;">2</div>
<div style="flex:1;">3</div>
</div>
</div>
<div class="demo">
<h3>混合使用</h3>
<div class="container" style="height:200px; border:1px dashed #666;align-items:flex-end">
<div style="flex:1;">1</div>
<div style="flex:1; align-self:center">2 align-self:center</div>
<div style="flex:1;">3</div>
</div>
</div>
</div> <div class="box">
<h2>[ align-content ] 元素分布排版</h2>
<div class="demo">
<h3 style="color:red">与 align-items:flex-start; 对比</h3>
<div class="container" style="height:300px; border:1px dashed #666;align-items:flex-start; flex-wrap: wrap;">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
</div>
</div>
<div class="demo">
<h3>align-content:flex-start;</h3>
<div class="container" style="height:300px; border:1px dashed #666;align-content:flex-start; flex-wrap: wrap;">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
</div>
</div>
<div class="demo">
<h3>align-content:center;</h3>
<div class="container" style="height:300px; border:1px dashed #666;align-content:center; flex-wrap: wrap;">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
</div>
</div>
<div class="demo">
<h3>align-content:flex-end;</h3>
<div class="container" style="height:300px; border:1px dashed #666;align-content:flex-end; flex-wrap: wrap;">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
</div>
</div> <div class="demo">
<h3>align-content:stretch;</h3>
<div class="container" style="height:300px; border:1px dashed #666;align-content:stretch; flex-wrap: wrap;">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
</div>
</div>
</div> <!-- 排序 -->
<div class="box">
<h2>[ order ] 元素排序控制,值越小越靠前</h2>
<div class="demo">
<h3>order:num;</h3>
<div class="container" style="height:200px; border:1px dashed #666;">
<div class="item" style="order: 1;">1 order:1;</div>
<div class="item" style="order: 0;">2 order:0;</div>
<div class="item" style="order: -1;">3 order:-1;</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</div>
</body> </html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex实例</title>
<style>
* {
font-family: "微软雅黑";
}
html,
body {
margin: ;
padding: ;
}
h2 {
font-size: 20px;
}
h3 {
font-size: 18px;
font-weight: normal;
}
.box {
padding: 20px;
border-bottom: 1px dashed #aaa;
}
.box:after {
content: "";
display: block;
width: 100%;
line-height: 1px;
clear: both;
}
.demo {
background: #f1f1f1;
padding: 5px;
box-sizing: border-box;
box-shadow: 5px 5px 10px #ddd;
margin-right: 5%;
margin-bottom: 10px;
width: 45%;
float: left;
}
.container {
display: -webkit-flex;
display: flex;
}
.container div:nth-child() {
background: #D8614C;
}
.container div:nth-child() {
background: #43BBD2;
}
.container div:nth-child() {
background: #6EC342;
}
.container div {
min-height: 50px;
color: #fff;
text-align: center;
line-height: 50px;
background: #006699;
}
.item {
width: 100px;
margin: 10px 10px ;
}
</style>
</head>
<body>
<div class="box">
<h2>[flex] 弹性盒模型布局</h2>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<div class="container" style="flex-direction:row;">
<div style="width: 100px;">100px</div>
<div style="flex: 2;">flex: 2;</div>
<div style="flex: 1;">flex: 1;</div>
</div>
</div>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<div class="container">
<div style="width: 150px;margin-right:10px;">150px,mright=10</div>
<div style="flex: 1;">flex: 1;</div>
<div style="width: 150px;margin-left:10px;">150px,mleft=10</div>
</div>
</div>
</div>
<div class="box">
<h2>[ flex-direction ] 元素开始方向</h2>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>flex-direction:row /* defalut */;</h3>
<div class="container" style="flex-direction:row;">
<div style="flex: 3;">flex: 3;</div>
<div style="flex: 2;">flex: 2;</div>
<div style="flex: 1;">flex: 1;</div>
</div>
</div>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>flex-direction:row-reverse;</h3>
<div class="container" style="flex-direction:row-reverse;">
<div style="flex: 3;">flex: 3;</div>
<div style="flex: 2;">flex: 2;</div>
<div style="flex: 1;">flex: 1;</div>
</div>
</div>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>flex-direction:column;</h3>
<div class="container" style="flex-direction:column;">
<div style="flex: 3;">flex: 3;</div>
<div style="flex: 2;">flex: 2;</div>
<div style="flex: 1;">flex: 1;</div>
</div>
</div>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>flex-direction:column-reverse;</h3>
<div class="container" style="flex-direction:column-reverse;">
<div style="flex: 3;">flex: 3;</div>
<div style="flex: 2;">flex: 2;</div>
<div style="flex: 1;">flex: 1;</div>
</div>
</div>
</div>
<!-- 是否换行 -->
<div class="box">
<h2>[ flex-wrap ] 元素是否换行</h2>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>flex-wrap:nowrap; /* default */</h3>
<div class="container" style="-webkit-flex-wrap:nowrap; border:1px dashed #666;">
<div style="width: 100px;">100px</div>
<div style="width: 200px;">200px</div>
<div style="width: 300px;">300px</div>
</div>
</div>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>flex-wrap:wrap; </h3>
<div class="container" style="-webkit-flex-wrap:wrap;border:1px dashed #666;">
<div style="width: 100px;">100px</div>
<div style="width: 200px;">200px</div>
<div style="width: 300px;">300px</div>
</div>
</div>
</div>
<!-- 横向排版 -->
<div class="box">
<h2>[ justify-content ] 元素横向排版</h2>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>justify-content:flex-start; /* default */</h3>
<div class="container" style="justify-content:flex-start; border:1px dashed #666;">
<div style="width: 100px;">100px</div>
<div style="width: 200px;">200px</div>
</div>
</div>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>justify-content:flex-end; </h3>
<div class="container" style="justify-content:flex-end; border:1px dashed #666;">
<div style="width: 100px;">100px</div>
<div style="width: 200px;">200px</div>
</div>
</div>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>justify-content:center; </h3>
<div class="container" style="justify-content:center; border:1px dashed #666;">
<div style="width: 100px;">100px</div>
<div style="width: 200px;">200px</div>
</div>
</div>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>justify-content:space-between; /* default */</h3>
<div class="container" style="justify-content:space-between; border:1px dashed #666;">
<div style="width: 100px;">100px</div>
<div style="width: 200px;">200px</div>
</div>
</div>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<h3>justify-content:space-around; /* default */</h3>
<div class="container" style="justify-content:space-around; border:1px dashed #666;">
<div style="width: 100px;">100px</div>
<div style="width: 200px;">200px</div>
</div>
</div>
</div>
<!-- 纵向排版 -->
<div class="box">
<h2>[ align-self ] 元素纵向排版，用在子元素上</h2>
<div class="demo">
<h3>display:-webkit-flex;</h3>
<div class="container" style="height:200px; border:1px dashed #666;">
<div style="flex:1;align-self: flex-start;">align-self: flex-start;</div>
<div style="flex:1;align-self: center;">align-self: center;</div>
<div style="flex:1;align-self: flex-end;">align-self: flex-end;</div>
</div>
</div>
<div class="demo">
<h3> </h3>
<div class="container" style="height:200px; border:1px dashed #666;">
<div style="flex:1;align-self:auto;">align-self:auto; /*default*/</div>
<div style="flex:1;align-self: baseline;">align-self: baseline;</div>
<div style="flex:1;align-self: stretch;">align-self: stretch;</div>
</div>
</div>
</div>
<div class="box">
<h2>[ align-items ] 元素纵向排版，用在父元素上</h2>
<div class="demo">
<h3>align-items:flex-start;</h3>
<div class="container" style="height:200px; border:1px dashed #666;align-items:flex-start">
<div style="flex:1;">1</div>
<div style="flex:1;">2</div>
<div style="flex:1;">3</div>
</div>
</div>
<div class="demo">
<h3>align-items:center;</h3>
<div class="container" style="height:200px; border:1px dashed #666;align-items:center">
<div style="flex:1;">1</div>
<div style="flex:1;">2</div>
<div style="flex:1;">3</div>
</div>
</div>
<div class="demo">
<h3>align-items:flex-end;</h3>
<div class="container" style="height:200px; border:1px dashed #666;align-items:flex-end">
<div style="flex:1;">1</div>
<div style="flex:1;">2</div>
<div style="flex:1;">3</div>
</div>
</div>
<div class="demo">
<h3>混合使用</h3>
<div class="container" style="height:200px; border:1px dashed #666;align-items:flex-end">
<div style="flex:1;">1</div>
<div style="flex:1; align-self:center">2 align-self:center</div>
<div style="flex:1;">3</div>
</div>
</div>
</div>
<div class="box">
<h2>[ align-content ] 元素分布排版</h2>
<div class="demo">
<h3 style="color:red">与 align-items:flex-start; 对比</h3>
<div class="container" style="height:300px; border:1px dashed #666;align-items:flex-start; flex-wrap: wrap;">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
</div>
</div>
<div class="demo">
<h3>align-content:flex-start;</h3>
<div class="container" style="height:300px; border:1px dashed #666;align-content:flex-start; flex-wrap: wrap;">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
</div>
</div>
<div class="demo">
<h3>align-content:center;</h3>
<div class="container" style="height:300px; border:1px dashed #666;align-content:center; flex-wrap: wrap;">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
</div>
</div>
<div class="demo">
<h3>align-content:flex-end;</h3>
<div class="container" style="height:300px; border:1px dashed #666;align-content:flex-end; flex-wrap: wrap;">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
</div>
</div>
<div class="demo">
<h3>align-content:stretch;</h3>
<div class="container" style="height:300px; border:1px dashed #666;align-content:stretch; flex-wrap: wrap;">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
</div>
</div>
</div>
<!-- 排序 -->
<div class="box">
<h2>[ order ] 元素排序控制,值越小越靠前</h2>
<div class="demo">
<h3>order:num;</h3>
<div class="container" style="height:200px; border:1px dashed #666;">
<div class="item" style="order: 1;">1 order:1;</div>
<div class="item" style="order: 0;">2 order:0;</div>
<div class="item" style="order: -1;">3 order:-1;</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</div>
</body>
</html>
flex 布局示例的更多相关文章
- Flex 项目属性：flex 布局示例
flex属性: flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto.后两个属性可选. 该属性有两个快捷值:auto (1 1 auto ...
- flex布局示例
来自:授权地址 作者:水牛01248 几个横排元素在竖直方向上居中 display: flex; flex-direction: row;//横向排列 align-items: center;//垂直 ...
- FLEX布局的一些问题和解决方法
前言 露珠最近研究了一下flex的布局方式,发现项w3c推出的这套布局解决方案对于日益复杂的前端开发布局来说是确实是一利器,并且在不同的屏幕上实现了真正的响应式布局:不再单纯地依赖百分比和float的 ...
- CSS3的flex布局
flex的一些属性 CSS3中引入了另一种框--flexbox,flexbox有一些block和inline不同的性质,比如: 自适应子元素(flex item,又称伸缩项目)的宽度 伸缩项目的flo ...
- 【前端】移动端Web开发学习笔记【2】 & flex布局
上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...
- flex基础示例
flex的一些基础用法: <!-- Flex布局已经得到了所有浏览器的支持:chrome21+.Opera12.1+.Firefox22+.safari6.1+.IE10+ Webkit内核浏览 ...
- css3 flex 布局
今天做一个小实战,需要让一个登录框始终保持水平和垂直居中,第一个想到的就是通过定位(要想让一个div居中,采用定位可以解决,示例), 然后开始接触flex布局,学完感觉真的好用,现把知识点记录一下,以 ...
- 写给 Android 开发的小程序布局指南，Flex 布局！
一.序 Hi,大家好,我是承香墨影! 最近在做小程序,验证一些方向,开发效率确实很快,就是各种微信的审核有点费劲,但是总归是有办法解决的. 想要开发一款小程序,其实和我们正常写一款 App 类似,你需 ...
- 阮一峰：Flex 布局教程
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html http://www.ruanyifeng.com/blog/2015/07/flex ...
随机推荐
- go chapter 6 - map array
遍历 for i,v := range *arr { // 遍历数组,第一个参数为index, 第二个参数为元素 fmt.Println("---------------") fm ...
- PM过程的一些典型场景和问题
如何进行团队激励 如何进行目标管理 如何进行绩效考核 如何处理团队沟通(技巧) 详述几种软件过程理论 需求分析和度量 测试过程和工具 开发管理过程
- BZOJ 2286 [Sdoi2011]消耗战（虚树+树形DP）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2286 [题目大意] 出一棵边权树,每次给出一些关键点,求最小边割集, 使得1点与各个关 ...
- BZOJ 2956 模积和（分块）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2956 [题目大意] 求∑∑((n%i)*(m%j))其中1<=i<=n,1 ...
- [SRM478]RandomApple
题意:有$k$种苹果和$n$个箱子,每个箱子中有一些苹果,先等概率选取$n$个箱子组成集合的非空子集,再从选出的苹果中随机选一个,问每种苹果被选中的概率是多少 设箱子$i$有$cnt_{i,j}$个第 ...
- 【二分】【字符串哈希】【二分图最大匹配】【最大流】XVII Open Cup named after E.V. Pankratiev Stage 14, Grand Prix of Tatarstan, Sunday, April 2, 2017 Problem I. Minimum Prefix
给你n个字符串,问你最小的长度的前缀,使得每个字符串任意循环滑动之后,这些前缀都两两不同. 二分答案mid之后,将每个字符串长度为mid的循环子串都哈希出来,相当于对每个字符串,找一个与其他字符串所选 ...
- 【推导】【数学期望】Gym - 101237D - Short Enough Task
按照回文子串的奇偶分类讨论,分别计算其对答案的贡献,然后奇偶分别进行求和. 推导出来,化简一下……发现奇数也好,偶数也好,都可以拆成一个等比数列求和,以及一个可以错位相减的数列求和. 然后用高中数学知 ...
- 【KMP】BZOJ3942-[Usaco2015 Feb] Censoring
[题目大意] 有一个S串和一个T串,长度均小于1,000,000,设当前串为U串,然后从前往后枚举S串一个字符一个字符往U串里添加,若U串后缀为T,则去掉这个后缀继续流程.输出最后的S串. [思路]三 ...
- python基础之序列化 time random os
序列化与反序列化 json pickle 1.什么是序列化与反序列化? 序列化就是将内存中的数据结构转成一种中间格式储存到硬盘或者基于网络传输 反序列化是网络,硬盘将被序列化的对象重新读到内存 2. ...
- Problem D: 结构体：计算输入日期是该年的第几天
#include <stdio.h> struct time{ int year; int month; int day;}; int main(void) { struct time s ...