Flexbox child align-self：Safari 中的 flex-end 问题
Posted
技术标签:
【中文标题】Flexbox child align-self：Safari 中的 flex-end 问题【英文标题】：Flexbox child align-self: flex-end issue in Safari 【发布时间】：2016-02-17 18:24:41 【问题描述】：我在 Safari 中使用弹性框布局时遇到了一些问题。我有一个使用 flexbox 对齐的条形图，但我无法在 safari 中正确实现它。
请查看我的JSfiddle。欢迎所有建议！除 Safari 外，所有浏览器都能正确显示。
小提琴： http://jsfiddle.net/husky999/dq0ha3d5/11/
HTML
<div id="barChart">
<ul class="bars">
<li class="axis">
<div class="level">Ninja</div>
<div class="level">Skilled</div>
<div class="level">Average</div>
<div class="level">Noob</div>
</li>
<li id="tomato" class="eachBar">
<div class="percentage">90<small>%</small>
<div class="skill">html5</div></div>
</li>
<li id="pink" class="eachBar">
<div class="percentage">70<small>%</small>
<div class="skill">SASS</div>
</div>
</li>
<li id="yellow" class="eachBar">
<div class="percentage">50<small>%</small>
<div class="skill">JS</div>
</div>
</li>
<li id="aqua" class="eachBar">
<div class="percentage">60<small>%</small>
<div class="skill">JQUERY</div>
</div>
</li>
<li id="apple" class="eachBar">
<div class="percentage">40<small>%</small>
<div class="skill">SYMFONY</div>
</div>
</li>
<li id="khaki" class="eachBar">
<div class="percentage">55<small>%</small>
<div class="skill">OOP</div>
</div>
</li>
</ul>
</div>
CSS
#barChart
height: 450px;
position: relative;
width: 100%;
background: url(http://2cweb.vn/img/editor-upload/blog/Bo-suu-tap-mau-pattern-cho-thiet-ke-web-P1-2Cwebvn-03.jpg) repeat;
border-bottom: 1px solid #ccc;
.bars
list-style: none;
display: inline;
height: 450px;
display:-webkit-box;
display:-webkit-flex;
display:-webkit-flexbox;
display:flex;
.level
margin: 0 20px 100px 0;
.percentage
position: absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
bottom: 0;
font-family: arial;
font-size: 32pt;
color: #FFF;
opacity: 0.3;
text-align: center;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
.skill
text-align: center;
color: #fff;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
font-family: arial;
font-size: 12px;
small
font-size: 14pt;
vertical-align: middle;
.eachBar
position: relative;
width: 15%;
float: left;
margin-left:20px;
visibility: hidden;
display: inline-block;
align-self: flex-end;
opacity: 0;
-webkit-border-radius: 0.3em 0.3em 0 0;
-moz-box-shadow: inset 0 0 1px 0 #FFF;
-webkit-box-shadow: inset 0 0 1px 0 #FFF;
box-shadow: inset 0 0 1px 0 #FFF;
.axis
display: block;
float: left;
border-right: 1px solid #CCC;
#tomato
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff3019+0,cf0404+100;Red+3D */
background: rgb(255,48,25); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,48,25,1) 0%, rgba(207,4,4,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,48,25,1)), color-stop(100%,rgba(207,4,4,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */
border: 1px solid rgba(207,4,4,1);
#pink
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fb83fa+0,e93cec+100;Pink+3D+%232 */
background: rgb(251,131,250); /* Old browsers */
background: -moz-linear-gradient(top, rgba(251,131,250,1) 0%, rgba(233,60,236,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(251,131,250,1)), color-stop(100%,rgba(233,60,236,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(251,131,250,1) 0%,rgba(233,60,236,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(251,131,250,1) 0%,rgba(233,60,236,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(251,131,250,1) 0%,rgba(233,60,236,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(251,131,250,1) 0%,rgba(233,60,236,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb83fa', endColorstr='#e93cec',GradientType=0 ); /* IE6-9 */
border: 1px solid rgba(233,60,236,1);
#yellow
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f1e767+0,feb645+100;Yellow+3D */
background: rgb(241,231,103); /* Old browsers */
background: -moz-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(241,231,103,1)), color-stop(100%,rgba(254,182,69,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(241,231,103,1) 0%,rgba(254,182,69,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(241,231,103,1) 0%,rgba(254,182,69,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(241,231,103,1) 0%,rgba(254,182,69,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(241,231,103,1) 0%,rgba(254,182,69,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#feb645',GradientType=0 ); /* IE6-9 */
border: 1px solid rgba(254,182,69,1);
#aqua
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#93cede+0,75bdd1+41,49a5bf+100;Blue+3D+%235 */
background: rgb(147,206,222); /* Old browsers */
background: -moz-linear-gradient(top, rgba(147,206,222,1) 0%, rgba(117,189,209,1) 41%, rgba(73,165,191,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(147,206,222,1)), color-stop(41%,rgba(117,189,209,1)), color-stop(100%,rgba(73,165,191,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(147,206,222,1) 0%,rgba(117,189,209,1) 41%,rgba(73,165,191,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(147,206,222,1) 0%,rgba(117,189,209,1) 41%,rgba(73,165,191,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(147,206,222,1) 0%,rgba(117,189,209,1) 41%,rgba(73,165,191,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(147,206,222,1) 0%,rgba(117,189,209,1) 41%,rgba(73,165,191,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93cede', endColorstr='#49a5bf',GradientType=0 ); /* IE6-9 */
border: 1px solid rgba(73,165,191,1);
#apple
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d2ff52+0,91e842+100;Neon */
background: rgb(210,255,82); /* Old browsers */
background: -moz-linear-gradient(top, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(210,255,82,1)), color-stop(100%,rgba(145,232,66,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(210,255,82,1) 0%,rgba(145,232,66,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(210,255,82,1) 0%,rgba(145,232,66,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(210,255,82,1) 0%,rgba(145,232,66,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(210,255,82,1) 0%,rgba(145,232,66,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2ff52', endColorstr='#91e842',GradientType=0 ); /* IE6-9 */
border: 1px solid rgba(183,223,45,1);
#khaki
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d5cea6+0,c9c190+40,b7ad70+100;Brown+3D */
background: rgb(213,206,166); /* Old browsers */
background: -moz-linear-gradient(top, rgba(213,206,166,1) 0%, rgba(201,193,144,1) 40%, rgba(183,173,112,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(213,206,166,1)), color-stop(40%,rgba(201,193,144,1)), color-stop(100%,rgba(183,173,112,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(213,206,166,1) 0%,rgba(201,193,144,1) 40%,rgba(183,173,112,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(213,206,166,1) 0%,rgba(201,193,144,1) 40%,rgba(183,173,112,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(213,206,166,1) 0%,rgba(201,193,144,1) 40%,rgba(183,173,112,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(213,206,166,1) 0%,rgba(201,193,144,1) 40%,rgba(183,173,112,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d5cea6', endColorstr='#b7ad70',GradientType=0 ); /* IE6-9 */
border: 1px solid rgba(183,173,112,1);
Javascript
$(document).ready(function()
$('#tomato').css('visibility':'visible', 'height': '0%').animate('opacity':'1', 'height':'90%', 1000, 'easeOutExpo');
$('#pink').css('visibility':'visible', 'height': '0%').stop().delay(200).animate('opacity':'1', 'height':'70%', 1000, 'easeOutExpo');
$('#yellow').css('visibility':'visible', 'height': '0%').stop().delay(400).animate('opacity':'1', 'height':'50%', 1000, 'easeOutExpo');
$('#aqua').css('visibility':'visible', 'height': '0%').stop().delay(600).animate('opacity':'1', 'height':'60%', 1000, 'easeOutExpo');
$('#apple').css('visibility':'visible', 'height': '0%').stop().delay(800).animate('opacity':'1', 'height':'40%', 1000, 'easeOutExpo');
$('#khaki').css('visibility':'visible', 'height': '0%').stop().delay(1000).animate('opacity':'1', 'height':'55%', 1000, 'easeOutExpo');
);
谢谢，祝你早日愉快！
【问题讨论】：
【参考方案1】：看起来您为 flex 容器添加了 Safari 前缀...
.bars
list-style: none;
display: inline;
height: 450px;
display:-webkit-box;
display:-webkit-flex;
display:-webkit-flexbox;
display:flex;
...但你没有为弹性项目（栏）。
对您的 CSS 进行此调整：
.eachBar
position: relative;
width: 15%;
float: left;
margin-left:20px;
visibility: hidden;
display: inline-block;
-webkit-align-self: flex-end; /* add prefixed version */
-ms-flex-item-align: end; /* add prefixed version */
align-self: flex-end;
opacity: 0;
-webkit-border-radius: 0.3em 0.3em 0 0;
-moz-box-shadow: inset 0 0 1px 0 #FFF;
-webkit-box-shadow: inset 0 0 1px 0 #FFF;
box-shadow: inset 0 0 1px 0 #FFF;
Revised Demo
尽管 Safari 9 支持所有标准的 flex 属性，但在 Safari 8 及更早版本中，您需要使用供应商前缀。
要快速添加所需的所有前缀，请在此处的左侧面板中发布您的 CSS：Autoprefixer。
有关 flexbox 浏览器支持的详细信息，请参见此处：http://caniuse.com/#search=flexbox
【讨论】：
真的很感谢@Michael_B。我很笨，因为我一直在 safari 5.1 上测试它：|。我需要制作信息才能在 safari7+ 和最新的 chrome 和 mozilla 上运行网站。以上是关于Flexbox child align-self：Safari 中的 flex-end 问题的主要内容，如果未能解决你的问题，请参考以下文章
Flexbox align-self:flex-start/end 是水平调整而不是垂直调整
重新总结flex布局（flex，flex-direction，justify-content，align-items，flex-wrap，align-self）