Element with flex property How to deactivate the resize width of the element?

Question

Element with flex property How to deactivate the resize width of the element?

Navigation

#1 by (1 votes)

1

I have a container with the display property: flex Inside the container I have several elements aligned horizontally with each other. When I change the size of the window some of the elements its width is changing for example in the elements

How can I change the width of certain elements? In my case I would be interested to not change the size of "button2"

Example:

HTML:

<div class ="contenedor">
  <div class ="celda" >
    <span class="titulo1">Titulo1</span>
    <span class="titulo2">Titulo2</span>
    <button class="boton1">Boton1</button>
    <button class="boton2" />
  </div>
</div>

CSS:

.celda {
  display: flex;
  justify-content: space-between;
  align-items: center;

}

.boton2 {
   width: 30px;
   height: 30px;
   border: 1px solid;
   background: url("../imagen/imagen.png");
}

html5 css3

asked by Popularfan 30.08.2018 в 11:29

source

1 answer

How to save a Json in a variable javascipt Exception when reading a certain DataSet column loaded with the contents of an XML file

score 1 · Accepted Answer

After doing different types of tests through the data that you have given me, I have verified that indeed, in Firefox, even if you put an item with width to fixed pixels, it rescales it.

After continuing to perform some tests I have come up with the theme that would allow you to use the flex box without this "inconvenience" occurring.

You can use the min-width property in the elements that you do not want to be resized, and you can control your behavior yourself.

CSS

.boton2 {
    width: 500px;
    min-width: 500px;
}