摘要: align-items 项目在交叉轴上对齐方式 flex-start:交叉轴的起点对齐。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 阅读全文
posted @ 2021-10-28 21:47 十七日尾 阅读(71) 评论(0) 推荐(0)
摘要: justify-content 项目在主轴上的对齐方式 flex-start (默认) 左对齐 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css 阅读全文
posted @ 2021-10-28 21:23 十七日尾 阅读(92) 评论(0) 推荐(0)
摘要: flex-wrap 当项目一行排不下时的换行方式 nowrap(默认) 不换行 会自动压缩项目使其能显示在一行 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type=" 阅读全文
posted @ 2021-10-28 21:13 十七日尾 阅读(187) 评论(0) 推荐(0)
摘要: flex-direction 项目排列方向 row(默认): 水平方向,起点在左 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 .b 阅读全文
posted @ 2021-10-28 21:02 十七日尾 阅读(119) 评论(0) 推荐(0)
摘要: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 div{ 8 width: 100px; 9 margin-top: 10px; 10 阅读全文
posted @ 2021-10-27 20:18 十七日尾 阅读(46) 评论(0) 推荐(0)
摘要: css 1 dl { 2 margin: 0 auto; 3 width: 340px; 4 border-right: 1px solid #f8b3d0; 5 } 6 7 dl dt { 8 background: #ff99cc; 9 color: #fff; 10 line-height: 阅读全文
posted @ 2021-10-27 19:36 十七日尾 阅读(162) 评论(0) 推荐(0)