Меню с левой стороны с повернутым текстом и выравниванием флексбокса - PullRequest
Новая
       53

Меню с левой стороны с повернутым текстом и выравниванием флексбокса

0 голосов
/ 08 мая 2020

Итак, у меня есть меню навигации с левой стороны с повернутыми элементами списка, которые содержат ссылку навигации внутри. Я довольно доволен результатом, за исключением того, что одна из этих ссылок намного длиннее в тексте, чем другие, и элемент списка, который содержит его, занимает столько же места внутри моей организации flexbox, как и другой. Кто-нибудь увидит исправление, чтобы иметь более точный интервал между этими элементами (принимая во внимание фактическую разницу в размере каждой ссылки для создания размещенных блоков)? 

:root {
	--clr-primary: rgb(54, 112, 199);
	--clr-light: #f4f4f4;
	--clr-dark: #333;
	--clr-warning: rgb(99, 36, 36);

	--main-padding: 15px;
	--width-standard: 3rem;
}

/*  ================
    hide out to play
    ================ */

.sub-menu {
	display: none;
}

/*  ================
    global styling
   ================ */

*,
*::before,
*::after {
	font-family: inherit;
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
		'Helvetica Neue', sans-serif;
}

/*  ================
        Menu
   ================ */

header {
	margin: 0;
	left: 0;
	top: 0;
	font-size: .8em;
}

.menu {
	width: 55px;
	height: 100vh;
	float: left;
	position: fixed;
}

.menu--list {
	z-index: 2;
	position: relative;
	float: left;
	background-color: green;
	width: 100%;
	height: 100vh;
	padding: 35px 0;
	margin: 0;
	display: inline-flex;
	flex-direction: column-reverse;
	justify-content: space-between;
	align-items: stretch;
	list-style: none;
	white-space: nowrap;
	color: var(--clr-light);
}

.menu__list-element {
	position: relative;
	flex: 1 1 auto;
}
.menu__list-element .biggest {
	flex: 2 1 auto;
}

a {
	position: absolute;
	top: 50%;
	text-align: center;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-90deg);
	text-decoration: none;
	text-align: center;
	color: inherit;
	flex: 1 1 auto;
}
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page</title>
</head>

<body>
    <header>
        <nav class="menu" id="menu">
            <ul class="menu--list">
                <li class="menu__list-element biggest"><a href="">Quienes somos</a></li>
                <li class="menu__list-element"><a href="">Servicios</a></li>
                <li class="menu__list-element"><a href="">Taller</a></li>
                <li class="menu__list-element"><a href="">Contacto</a></li>
            </ul>
            <div class="sub-menu">
                <div class="big-tab">
                    <ul class="big-tab__quienes-somos">
                        <li class="big-tab__list list-element">
                            <a href="#slide0">Producción</a>
                        </li>
                        <li class="big-tab__list list-element">
                            <a href="#slide1">Maniobra y ontaje</a>
                        </li>
                        <li class="big-tab__list list-element">
                            <a href="#slide2">Embalaje</a>
                        </li>
                        <li class="big-tab__list list-element">
                            <a href="#slide3">Transporte</a>
                        </li>
                        <li class="big-tab__list list-element">
                            <a href="#slide4">Dirección de arte</a>
                        </li>
                    </ul>
                </div>
                <div class="small-tab">
                    <p></p>
                </div>
            </div>
        </nav>
    </header>
    <main>

    </main>
    <footer>

    </footer>


</body>

</html>
...