Как изменить ширину в элементе flexbox, используя javascript / jquery - PullRequest
Новая
       10

Как изменить ширину в элементе flexbox, используя javascript / jquery

0 голосов
/ 10 июня 2018

Как изменить ширину гибкого элемента с помощью JavaScript?У меня есть этот код (fiddle https://jsfiddle.net/sdgz8nxa/24/)

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .container {
    border: 2px solid red;
    height: 100vh;
    display: flex;
  }
  .bl1 {
    border: 2px solid lime;
    height 100%;
    flex: 1;
  }
  .bl2 {
    border: 2px solid blue;
    height 100%;
    flex: 1;
  }
  </style>
</head>
<body>
  <div class="container">
  <div class="bl1"></div>
  <div class="bl2"></div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script>

  $( '.bl1' ).append( 'before ' + $( ".bl1" ).css( "width" ) );
  //here can't change 
  $( ".bl1" ).css( "width", "300px" );

  $( '.bl1' ).append( '<br>after ' + $( ".bl1" ).css( "width" ) );  
  </script>
</div>
</body>
</html>

и в ширине вывода всегда одинаковые эта строка не работает $ (".bl1") .css ("width", "300px");

Как изменить ширину с помощью JavaScript в блоке flexbox?

Ответы [ 2 ]

0 голосов
/ 10 июня 2018

Вы можете определить так 

$(".bl1").css( "flex", "0 1 300px" );

, когда вы написали для .bl1 и .bl2 flex: 1;, что означает 

flex-grow: 1;  // should be equal to each other
flex-shrink: 1;
flex-basis: 0%;

, теперь вы можете сказать 

$(".bl1").css( "flex", "0 1 300px" );

, что означает 

flex-grow: 0;
flex-shrink: 1;
flex-basis: 300px;

, а flex-based означает ширину бокса, и вы можете сделать полный возврат с помощью width:300px для старых браузеров 

  $('.bl1' ).append( 'before ' + $(".bl1" ).css("width") );
  //here can't change 
$(".bl1").css( "flex", "0 1 300px" );

  $('.bl1' ).append( '<br>after ' + $( ".bl1" ).css( "width" ) );  
.container {
    border: 2px solid red;
    height: 100vh;
    display: flex;
  }
  .bl1 {
    border: 2px solid lime;
    height 100%;
    flex: 1;
  }
  .bl2 {
    border: 2px solid blue;
    height 100%;
    flex: 1;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="bl1"></div>
  <div class="bl2"></div>
0 голосов
/ 10 июня 2018

Вместо использования ширины вы можете использовать свойство 'flex', чтобы изменить его размер.Вы также можете использовать десятичные дроби.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...