Limit the size of an item in flexbox

Asked

Viewed 134 times

0

I’m trying to make a Toolbar with flex, but the icons are taking the whole Toolbar when I step over with the cursor: 

@media screen{

    :root{
        --primary-color: #29f1c3;
    }

    *{
        margin: 0;
        padding: 0;
    }

    img{
        max-width: 100%;
        height: auto;
    }

    /*    Navgation    */
    .main-toolbar{
        background-color: var(--primary-color);
        width: 100%;
        min-height: 56px;
        display: flex;
        justify-content: center;
    }

    .main-toolbar .menu-btn{
        background: none;
        border: none;
        outline: none;
        display: flex;
        margin-left: 3%;
        cursor: pointer;
    }

    .account-btn{
        background: none;
        border: none;
        outline: none;
        display: flex;
        flex: 1;
        flex-direction: row-reverse;
        margin-right: 3%;
        cursor: pointer;
    }

}
<nav class="main-toolbar">

            <button class="menu-btn">
                <img class="menu-icon" width="48" height="48" src="../assets/icons/ic_hamburger.svg" alt="" />
            </button>

            <button class="account-btn">
                <img class="account-icon" width="48" height="48" src="../assets/icons/ic_account.svg" alt=""/>
            </button>
        </nav>

As you can see by hovering the mouse over the entire Toolbar is selectable, as I do for only buttons to be selectable?

html css html5 css3
  • 1

    That is the problem flex: 1 on its second button. If you have no specific reason, remove it and replace the justify-content in your class main-toolbar for: justify-content: space-between. Will continue to look the same as now.

  • @Renan seems that the problem is the same, because you do not put as an answer?

  • @hugocsl walking a little discouraged to participate. :/

  • 1

    @Renan understand you well comrade, believe me! The situation is getting worse... Go ahead

  • 1

    @Renan your comment solved me problem, thank you

1 answer

2

you need to remove the display:flex of the button tags, also remove the property flex:1 from the second button and to align you can use the property Justify-content. Below is the corrected code. - Obs1: I commented on what needs to be removed; - Obs2: I switched the images with some I found on the web just to make them visible here.

<!doctype html>
<html>
<head>
    <meta charset="iso-8859-1">
    <title>Teste</title>
    <style>
	@media screen{
		:root{
			--primary-color: #29f1c3;
		}
		
		*{
			margin: 0;
			padding: 0;
		}
		
		img{
			max-width: 100%;
			height: auto;
		}
		
		/*    Navgation    */
		.main-toolbar{
			background-color: var(--primary-color);
			width: 100%;
			min-height: 56px;
			display: flex;
			justify-content: center; /*flex-start | flex-end*/
		}
		
		.main-toolbar .menu-btn{
			background: none;
			border: none;
			outline: none;
			/*display: flex;*/
			margin-left: 3%;
			cursor: pointer;
		}
		
		.account-btn{
			background: none;
			border: none;
			outline: none;
			/*display: flex;
			flex: 1;*/
			flex-direction: row-reverse;
			margin-right: 3%;
			cursor: pointer;
		}

         }
    </style>
</head>
<body>
    <nav class="main-toolbar">

        <button class="menu-btn">
            <img class="menu-icon" width="48" height="48" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/1200px-Hamburger_icon.svg.png" alt="" />
        </button>

        <button class="account-btn">
            <img class="account-icon" width="48" height="48" src="https://upload.wikimedia.org/wikipedia/commons/7/70/User_icon_BLACK-01.png" alt=""/>
        </button>
    </nav>
</body>
</html>

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.