frontend-coder
8/26/2017 - 6:35 AM

How do flex menu for landing pages

How do flex menu for landing pages



<ul class="menu">
    <li class="menu__item"><a href="" class="menu__link">Раз</a></li>
    <li class="menu__item"><a href="" class="menu__link">Два слова</a></li>
    <li class="menu__item"><a href="" class="menu__link">Это</a></li>
    <li class="menu__item"><a href="" class="menu__link">Просто</a></li>    
    <li class="menu__item"><a href="" class="menu__link">Пример</a></li>
</ul>






.menu {
    display: -webkit-box; /* Android 4.3-, Safari */
    -webkit-box-pack: justify; /* Android 4.3-, Safari */
    display: flex;
    justify-content: space-between;
    text-align: justify;
    text-align-last: justify;
}
.menu__item {
    display: inline-block;
    display: -webkit-box; /* !хак! для Android 4.3-, должен идти после inline-block */
}

2 variants
<h1><span>Современное решение</span></h1>
	<div class="test-box">
		<ul>
			<li>Пункт 1</li>
			<li>Пункт 2</li>
			<li>Пункт 3</li>
			<li>Пункт 4</li>
			<li>Пункт 5</li>
			
		</ul>
	</div>
	
	/* Общие стили - Для оформления */
	body { min-width: 600px; margin: 0 10px; font: 0.8125em/1 Verdana,sans-serif; background: #fff; }
	h1 {
		font: 1.8em Georgia,Times,serif;
		margin-bottom: 0.5em;
		color: #E76D13;
		text-align: center;
	}
	h1 span { color: #000;}
	.test-box {
		background: #F8F7EF; 
		border: 1px dashed #000;
		border-bottom: 1px dashed #000;
		
		margin: 10px auto 10px;
		padding: 10px 0;
		6width: 500px;
		
	}
	
		.test-box ul {		
			margin: 0;
			padding: 0;
			list-style: none;
			
			
		
		}
	.test-width { 
		background: #E4C17D; 
		margin-top: 10px;
		text-align: center;
		padding: 5px 0;
		margin: 10px auto 10px;
	}
	/* CSS для примера */
	.test-box ul {
		font: 14px Verdana, Geneva, sans-serif;
		text-align: center;


        display: -webkit-box; /* Android 4.3-, Safari без оптимизации */
        -webkit-box-pack: justify; /* Android 4.3-, Safari без оптимизации */
        display: -webkit-flex; /* оптимизация для Safari */
        -webkit-justify-content: space-between; /* оптимизация для Safari */
        display: flex;
        justify-content: space-between;
        text-align: justify; /* IE10-, Firefox 12-22 */
        text-align-last: justify; /* IE10-, Firefox 12-22 */

        /*text-justify: newspaper; /* IE7- */
        /*zoom: 1; /* IE7- */
	}


		.test-box ul li {
			display : inline-block;
			width : 100px;
			height: 100px;
			margin: 0 0 20px;
			background: #E76D13;
			vertical-align: top;
			text-align: center;

            display: -webkit-box; /* !хак! для Android 4.3-, должен идти после inline-block */



            /*display: inline;  /* IE7- */
            /*zoom: 1; /* IE7- */
        }