Java教程

运行flex布局对单行多个item进行布局的技巧

本文主要是介绍运行flex布局对单行多个item进行布局的技巧，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

 

<ul class="local-nav">
		        <li>
		            <a href="#" title="景点·玩乐">
		                <span class="local-nav-icon-icon1"></span>
		                <span>景点·玩乐</span>
		            </a>
		        </li>
		        <li>
		            <a href="#" title="景点·玩乐">
		                <span class="local-nav-icon-icon2"></span>
		                <span>景点·玩乐</span>
		            </a>
		        </li>
		        <li>
		            <a href="#" title="景点·玩乐">
		                <span class="local-nav-icon-icon3"></span>
		                <span>景点·玩乐</span>
		            </a>
		        </li>
		        <li>
		            <a href="#" title="景点·玩乐">
		                <span class="local-nav-icon-icon4"></span>
		                <span>景点·玩乐</span>
		            </a>
		        </li>
		        <li>
		            <a href="#" title="景点·玩乐">
		                <span class="local-nav-icon-icon5"></span>
		                <span>景点·玩乐</span>
		            </a>
		        </li>
		    </ul>
.local-nav {
    display: flex;
    border-radius: 8px;
	width: 100%;
	background-color: #fff;
	height: 64px;
	margin-top: 4px;
}

.local-nav li {
    flex: 1;
}

.local-nav a {
    display: flex;
	flex-direction: column;
	margin-top: 6px;
	align-items: center;
}

.local-nav li [class^="local-nav-icon"] {
	margin: 0 auto;
    width: 32px;
    height: 32px;
    background: url(../img/images/localnav_bg.png) no-repeat 0 0;
    background-size: 32px auto;
}

.local-nav li .local-nav-icon-icon2 {
    background-position: 0 -32px;
}

.local-nav li .local-nav-icon-icon3 {
    background-position: 0 -64px;
}

.local-nav li .local-nav-icon-icon4 {
    background-position: 0 -96px;
}

.local-nav li .local-nav-icon-icon5 {
    background-position: 0 -128px;
}

这篇关于运行flex布局对单行多个item进行布局的技巧的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航